两个div在顶部相互操作，精确高度100％+低div可滚动
[英]Two divs on top op each other, together exact height 100% + lower div scrollable
问题描述
I'm stuck with this problem: 
我遇到了这个问题：
I have a div (#container) which contains two divs. 我有一个div（#container），它包含两个div。 The height of the container should be exact 100%, regardless of the content of this div - not less not more. 容器的高度应该是100％，不管这个div的内容是什么 - 不少于更多。
Inside this div I want two full-width divs on top of each other: 在这个div里面我想要两个全宽的div在彼此之上：
- The (#upper) div's content automatically determines its height. （#upper）div的内容自动确定其高度。
- The (#lower) div's content should be scrollable, but only vertically. （#lower）div的内容应该是可滚动的，但只能是垂直的。 Its height is dependent on the height of (#upper): 100% - (#upper)height = (#lower)height 它的高度取决于（#upper）的高度：100％ - （#upper）height =（#lower）height
Currently I have the following css ... 目前我有以下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;
}
... as well as this code: ......以及这段代码：
<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>
How can the (#container)'s height be exactly 100% - independent of its content? （#container）的高度如何正好100％ - 与其内容无关？ Now the height becomes larger because of the combined content of (#upper) and (#lower)? 现在由于（#upper）和（#lower）的组合内容，高度变得更大了？
How can (#lower) be scrollable (only up and down, not left to right!)? 如何（#lower）可滚动（仅上下，而不是从左到右！）？
Thank you very much for your feedback, I hope we can all learn from this. 非常感谢您的反馈，我希望我们都能从中吸取教训。
4 个解决方案
解决方案1
3 已采纳 2013-08-18 20:21:29
You should set your html and body elements to have a height of 100%, so your children divs know what to base the percentage off of. 你应该将你的html和body元素设置为100％的高度，这样你的孩子们就会知道什么是基于百分比。 Like so: 像这样：
html, body {
height:100%;
width:100%;
}
Change your container to this: 将容器更改为：
#container
{
width: 500px;
height: 100%;
background-color: #f00;
}
As for your scrolling issue, you're almost there. 至于你的滚动问题，你几乎就在那里。 Change the code to the following: 将代码更改为以下内容：
#lower {
width: 100%;
height:100px;
background-color: #00f;
overflow-y: auto;
}
For it to work best, have a fixed height set on your lower div and that'll make it easy for the scrollable action to work best. 为了使它工作得最好，在你的下部div上设置一个固定的高度，这将使滚动动作更容易工作。
EDIT: 编辑：
I realized I mis-read your question. 我意识到我误读了你的问题。 You'd like to have your lower div fill the remaining height of the window. 您希望让您的下部div填充窗口的剩余高度。 Here's how to do that in jquery: 以下是如何在jquery中执行此操作：
var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top);
$('#lower').height(remaining_height);
I still haven't found a way to do that with only CSS... Sadly. 我还没有找到一种只使用CSS的方法......可悲的是。
解决方案2
2 2015-10-21 17:03:25
I think this may help you: 我想这可能会对你有所帮助：
<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>
This will take 50px out the lower div 这将比较低的div需要50px
解决方案3
1 2015-06-09 14:28:47
For a pure CSS solution, use display: table-row. 对于纯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>
This solution only works if the height of the content is not more than 100%, see here: https://stackoverflow.com/a/13668087/603569 此解决方案仅在内容高度不超过100％时才有效，请参见此处： https ： //stackoverflow.com/a/13668087/603569
解决方案4
0 2014-01-24 02:28:57
Here a 100% css alternative: 这里有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>
Remember that all parent elements, including body and html, must have their height set too. 请记住，所有父元素（包括body和html）也必须设置其高度。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.