在绝对大小的内容之间创建具有相对大小的div

Question

I'm looking for a way to create a div that has a relative size, adjusted to the browser's height. 我正在寻找一种创建具有相对大小的div的方法，该div可以根据浏览器的高度进行调整。 Problem is that I dont really know where to start, or how to do it. 问题是我真的不知道从哪里开始，或者怎么做。

Basically I will have a header, which will be 50px heigh, and the relative div below there. 基本上，我将有一个标头，高度为50px，下面是相对div。 Below that div, theres another div that HAS to be 50px inside the screen (Without scrolling). 在该div下方，还有另一个div在屏幕内为50px（不滚动）。 More content of that div, or another div (I dont mind which one) will be outside the screen. 该div或另一个div（我不介意哪个div）的更多内容将在屏幕外。

So if the browser is 1000px heigh, 100px will be spend for the top and bottom divs. 因此，如果浏览器高度为1000像素，则顶部和底部div将花费100像素。 That means the relative div must be 900px heigh. 这意味着相对div高度必须为900px。

To support the idea I have made a simple image of what I'm willing to achieve: (Yeah, paint skills, got no Photoshop at my current location) 为了支持该想法，我对我愿意实现的目标做了简单的表述：（是的，绘画技巧，在我当前的位置上没有Photoshop）

演示版

The orange border would represent the size of the complete page. 橙色边框代表整个页面的大小。

I know this is pretty easy to do with JavaScript, that wouldn't be a challenge for me, but I'm trying to find a CSS-only solution if possible. 我知道使用JavaScript很容易做到这一点，这对我来说不是挑战，但是我正在尝试寻找一种仅CSS的解决方案。 Any ideas? 有任何想法吗？

Answer 1

An idea, using % instead of px for header and footer : here 一个想法，用代替PX页眉和页脚％：这里

<div id='header'></div>
<div id='content'>
    <div id='scrollable'>this is my content</div>
</div>
<div id='footer'></div>

And CSS body { height:100%; 而CSS主体{高度：100％； } #header { width:100%; } #header {width：100％; height:15%; 高度：15％; position:absolute; 位置：绝对； top:0; 顶：0; background:red; 背景：红色； margin:0; 保证金：0; } }

#footer {
    width:100%;
    height:15%;
    position:absolute;
    bottom:0;
    background:blue;

}

#content {
    position:absolute;
    width:100%;
    top:15%;
    height : 70%;
    background:yellow;
    overflow-y:auto;
}
#content #scrollable {
     min-height:100%;
}

Answer 2

So I think this is what you want 所以我想这就是你想要的

<div id="scrn">
<div id="top"></div>
<div id="bottom"></div>
</div>

Then some CSS 然后是一些CSS

#scrn {
 height: 1700px;
 width: 100%;
 position: relative;
 }
#top {
 height: 50px;
 width: 100%;
 position: fixed:
 top: 0px;
 }
#bottom{
 height: 50px;
 width: 100%;
 position: fixed;
 bottom: 0px;
 }

This looks right I think? 我觉得这看起来正确吗？ Also I put the position: relative and height in because I am not 100% sure what you are trying to achieve with it. 我也提出了立场：相对和身高，因为我不是100％地确定您要达到的目标。

Answer 3

Ok! 好！ Here's a technique I've used a bunch- this will work best if you don't fix the height of your relative positioned div. 这是我使用过的一种技巧-如果您不固定相对位置div的高度，这将是最好的方法。 Based on your description, this is not the intent so it should work fine. 根据您的描述，这不是目的，因此应该可以正常工作。

Basic Markup: 基本标记：

<body>

    <header>DIV 1 - 50PX</header>

    <div class="main">MAIN STUFF - RELATIVE</div>

    <footer>DIV 2 - 50PX</footer>

</body>

CSS: CSS：

body, html{
    width:100%;
    height:100%;
}

body{
    margin:0;
    positino:relative;
}

header{
    position:absolute;
    width:100%;
    height:50px;
    top:0;
    left:0;
    background:#666666;
    color:#ffffff;
    z-index:10;
}

footer{
    position:absolute;
    width:100%;
    height:50px;
    bottom:0;
    left:0;
    background:#555555;
    color:#ffffff;
    z-index:10;
}

.main{
    position:relative;
    box-sizing:border-box;
    padding:50px 1em;
    height:150%; /* this is to simulate your dynamic content */
    background:#cccccc;
}

http://jsfiddle.net/xdeQ6/1/ http://jsfiddle.net/xdeQ6/1/

Adding padding to the main content div will make sure that your actual content at the top and bottom of your page is not hidden behind the header and footer divs. 在主要内容div中添加填充将确保您在页面顶部和底部的实际内容没有隐藏在页眉和页脚div的后面。

Answer 4

Here is my approach: 这是我的方法：

header, footer {
    background: #f00;
    position: fixed;
    width: 100%;
    height: 50px;
    left: 0;
}
header {
    top: 0;
}
footer {
    bottom: 0;
}

#content {
    margin: 50px 0;
}

See my fiddle: http://jsfiddle.net/Vw97D/1/ 看看我的小提琴： http : //jsfiddle.net/Vw97D/1/
Does it meet your expectations? 它符合您的期望吗？

在绝对大小的内容之间创建具有相对大小的div

问题描述

4 个解决方案

解决方案1
0 2013-10-17 15:32:03

解决方案2
0 2013-10-17 15:32:12

解决方案3
0 2013-10-17 15:39:43

解决方案4
0 2013-10-18 08:18:05

在绝对大小的内容之间创建具有相对大小的div

问题描述

4 个解决方案

解决方案1 0 2013-10-17 15:32:03

解决方案2 0 2013-10-17 15:32:12

解决方案3 0 2013-10-17 15:39:43

解决方案4 0 2013-10-18 08:18:05

解决方案1
0 2013-10-17 15:32:03

解决方案2
0 2013-10-17 15:32:12

解决方案3
0 2013-10-17 15:39:43

解决方案4
0 2013-10-18 08:18:05