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

【问题标题】：Creating a div with a relative size, between absolute sized content在绝对大小的内容之间创建一个具有相对大小的 div
【发布时间】：2013-10-18 16:18:05
【问题描述】：

我正在寻找一种方法来创建一个具有相对大小的 div，并根据浏览器的高度进行调整。问题是我真的不知道从哪里开始，或者如何去做。

基本上我会有一个 50px 高的标题，以及下面的相对 div。在该 div 下方，还有另一个 div 必须在屏幕内为 50px（不滚动）。该 div 的更多内容，或另一个 div（我不介意哪个）将在屏幕之外。

因此，如果浏览器的高度为 1000 像素，则顶部和底部 div 将花费 100 像素。这意味着相对 div 的高度必须为 900px。

为了支持这个想法，我制作了一张我愿意实现的简单图像：（是的，绘画技巧，我目前的位置没有 Photoshop）

橙色边框代表整个页面的大小。

我知道使用 JavaScript 很容易做到这一点，这对我来说不会是一个挑战，但如果可能的话，我正在尝试找到一个纯 CSS 的解决方案。有什么想法吗？

【问题讨论】：

Fluid height main body with header and footer 的可能重复项
@isherwood 接近了，但是当使用 Chrome 检查 div 时，中间的 div 似乎使用了完整的高度，并且只在中间显示其内容。不完全是我要搜索的内容，但它显示了这个想法。
很公平，但您还没有向我们展示您的尝试。这是意料之中的事。
“我真的不知道从哪里开始”：P 我会看看使用你链接的方法。
这个问题（及其变体）经常出现在 SO 上。选择一种方法并尝试，然后寻求更具体的帮助。

标签： css html

【解决方案1】：

一个想法，使用 % 而不是 px 作为页眉和页脚：here

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

和 CSS 身体 { 高度：100%； } #标题{ 宽度：100%；高度：15%；位置：绝对；顶部：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%;
}

【讨论】：

无处不在，因为我不希望一切都是相对的。那永远不会很好。

【解决方案2】：

所以我认为这就是你想要的

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

然后是一些 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;
 }

我觉得这看起来对吗？我还把 position: relative 和 height 放进去，因为我不是 100% 确定你想用它来实现什么。

【讨论】：

固定位置？不，这不适用于这种情况。当您尝试滚动时，它会将 div 留在屏幕上。
啊，我没有得出他想在滚动时跳过它们。这解释了 javascript 部分。

【解决方案3】：

好的！这是我使用过的一种技术——如果你不固定相对定位的 div 的高度，这将最有效。根据您的描述，这不是意图，因此应该可以正常工作。

基本标记：

<body>

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

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

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

</body>

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/

向主要内容 div 添加填充将确保页面顶部和底部的实际内容不会隐藏在页眉和页脚 div 后面。

【讨论】：

正如我在回复 user2879869 时已经说过的，我真的不希望页眉和页脚有固定的位置。
中心 div 应该滚动吗？页面应该滚动吗？

【解决方案4】：

这是我的方法：

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

#content {
    margin: 50px 0;
}

看我的小提琴：http://jsfiddle.net/Vw97D/1/
它符合您的期望吗？

【讨论】：