两个 div 相互重叠，精确高度 100% + 可滚动的下 div答案

【问题标题】：Two divs on top op each other, together exact height 100% + lower div scrollable两个 div 相互重叠，精确高度 100% + 可滚动的下 div
【发布时间】：2013-08-20 15:01:06
【问题描述】：

我被这个问题困住了：

我有一个包含两个 div 的 div (#container)。容器的高度应该是精确的 100%，不管这个 div 的内容是什么——不是更少也不是更多。

在这个 div 中，我想要两个全角 div 彼此重叠：

(#upper) div 的内容自动确定其高度。
(#lower) div 的内容应该是可滚动的，但只能垂直滚动。它的高度取决于 (#upper) 的高度：100% - (#upper)height = (#lower)height

目前我有以下 css ...

body {
    margin:0;
    padding:0;
    }
#container 
    {
    position: relative;
    width: 500px;
    height: 100%;
    max-height: 100%;
    background-color: #f00;
    }
#upper { 
    width: 100%;
    background-color: #0f0;
    }
#lower {
    width: 100%;
    background-color: #00f;
    overflow: auto;
}

...以及这段代码：

<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>

(#container) 的高度如何能精确到 100% - 与其内容无关？现在高度变大是因为(#upper)和(#lower)的组合内容吗？

(#lower) 怎么可以滚动（只能上下滚动，不能从左到右！）？

非常感谢您的反馈，希望我们都能从中吸取教训。

【问题讨论】：

关于#lower中的滚动，改为overflow-y: auto;溢出-x：隐藏；
当你说高度应该是 100% 时，你说的是屏幕尺寸的 100%？
感谢您的回复 kunalbhat；事实上，100% 的屏幕尺寸。

标签： css html height scrollable

【解决方案1】：

我认为这可能会对您有所帮助：

<head>
    <title></title>
    <style>
        .upper{
            height:50px;
            border: 1px solid groove;
        }
        .lower{
            height:calc(100% - 50px);
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div style="height:500px; border:1px solid red; position:relative;">
        <div class="upper"></div>
        <div class="lower"></div>
    </div>
</body>

这将在较低的 div 中取出 50px

【讨论】：

【解决方案2】：

对于纯 CSS 解决方案，请使用 display: table-row。

<style>
*{
    box-sizing: border-box;
    margin:0;padding:0;
}
  html, body, #container{
    height: 100%;
}

#container{
    display: table;
    height: 100%;
}

#upper, #lower{
    display: table-row;
}

#upper{
    height: 100px;
}
</style>

<div id="container">
    <div id="upper">bla</div>
    <div id="lower">bla</div>
</div>

此解决方案仅在内容高度不超过 100% 时有效，请参见此处：https://stackoverflow.com/a/13668087/603569

【讨论】：

【解决方案3】：

这里是 100% css 替代品：

<div style="height:100%;">
    main div

    <div style="height:100%;padding-bottom:200px;">
    header div
    </div>

    <div style="position:relative;height:200px;top:-200px;">
    footer div
    </div>

</div>

请记住，所有父元素，包括 body 和 html，也必须设置它们的高度。

【讨论】：

【解决方案4】：

您应该将 html 和 body 元素的高度设置为 100%，这样您的子 div 就知道该百分比的基础是什么。像这样：

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

将您的容器更改为：

#container 
{
    width: 500px;
    height: 100%;
    background-color: #f00;
}

至于你的滚动问题，你快到了。将代码更改为以下内容：

#lower {
    width: 100%;
    height:100px;
    background-color: #00f;
    overflow-y: auto;
}

为了让它发挥最佳效果，在你的下 div 上设置一个固定的高度，这样可以很容易地让可滚动动作发挥最佳效果。

编辑：

我意识到我看错了你的问题。你想让你的下 div 填充窗口的剩余高度。这是在 jquery 中执行此操作的方法：

var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top); 
$('#lower').height(remaining_height);

我还没有找到只用 CSS 来做到这一点的方法……很遗憾。

【讨论】：

感谢您的回复，@jbw91。为什么我不能为#container 使用“位置：相对”？我不能为#lower div 使用固定高度：#upper div 的内容决定了它的高度，并且#lower div 必须连接。换句话说，#lower div 应该填充#upper div 和屏幕底部之间的空间。
不，您可以使用 position:relative;。我忘了包括那个。 :) 至于您关于填充屏幕其余部分的下部 div 的问题，我误读了您的问题。我已经更新了我的答案以包含一种方法。
非常感谢@jbw91！现在它可以正常工作了！我刚刚将 # 添加到 $('lower') ;) 我接受了你的回答。
哦，感谢您指出这一点！刚刚为其他人更新。 :)