如何使用div分割底部和顶部的底部固定高度和顶部需要剩余空间的屏幕 [英] How to use div to split screen in bottom and top section where bottom is fixed height and top takes remaining space
本文介绍了如何使用div分割底部和顶部的底部固定高度和顶部需要剩余空间的屏幕的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何将我的HTML页面分成两行，使用div，其中底部div的高度为100px，顶部div占据剩余空间。
目前我有以下内容，但是这里顶部的div与底部的div重叠：
html，body，object {height：100％;宽度：100％; margin：0px; padding：0px;} div {margin：0px; padding：0px;}＃mainContainer {position：relative;身高：100％; width：100％;}＃topContainer {border：1px solid red;位置：绝对; top：0px; left：0px;身高：100％; width：100％;}＃bottomContainer {border：1px solid blue;位置：绝对; bottom：0px; left：0px; height：100px; width：100％;}
< body> < div id =mainContainer> < div id =topContainer>这是顶部div< / div> < div id =bottomContainer>这是底部div< / div> < / div>< / body>
使用display：table;在Chrome和Firefox中运行良好，但不幸的是不在IE9中（这是必需的）。任何帮助将不胜感激。
#topContainer {
border：1px solid red;
位置：绝对;
top：0px;
left：0px;
bottom：100px; // set bottom
height：calc（100％ - 100）; //计算高度
宽度：100％;
}
其他代码运行良好。
这是更新后的代码片段。
html，body，object {height：100％;宽度：100％; margin：0px; padding：0px;} div {margin：0px; padding：0px;}＃mainContainer {position：relative;身高：100％; width：100％;}＃topContainer {border：1px solid red;位置：绝对; top：0px; left：0px;底部：100px;身高：calc（100％ - 100）; width：100％;}＃bottomContainer {border：1px solid blue;位置：绝对; bottom：0px; left：0px; height：100px; width：100％;}
< body> < div id =mainContainer> < div id =topContainer>这是顶部div< / div> < div id =bottomContainer>这是底部div< / div> < / body>
How do I split my HTML page into two rows using divs, where the bottom div has a height of 100px and the top div takes up the remaining space.
Currently I have the following, however here the top div overlaps the bottom div:
html,
body,
object {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
div {
margin: 0px;
padding: 0px;
}
#mainContainer {
position: relative;
height: 100%;
width: 100%;
}
#topContainer {
border: 1px solid red;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
#bottomContainer {
border: 1px solid blue;
position: absolute;
bottom: 0px;
left: 0px;
height: 100px;
width: 100%;
}
<body>
<div id="mainContainer">
<div id="topContainer">
This is the top div
</div>
<div id="bottomContainer">
This is the bottom div
</div>
</div>
</body>
I have tried using display: table; which works fine in Chrome and Firefox but unfortunately not in IE9 (which is a requirement). Any help would be greatly appreciated.
解决方案
Just change #topContainer to
#topContainer {
border: 1px solid red;
position: absolute;
top: 0px;
left: 0px;
bottom: 100px; //set bottom
height: calc(100% - 100); //calculate height
width: 100%;
}
Rest of your code works well.
Here is updated snippet.
html,
body,
object {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
div {
margin: 0px;
padding: 0px;
}
#mainContainer {
position: relative;
height: 100%;
width: 100%;
}
#topContainer {
border: 1px solid red;
position: absolute;
top: 0px;
left: 0px;
bottom: 100px;
height: calc(100% - 100);
width: 100%;
}
#bottomContainer {
border: 1px solid blue;
position: absolute;
bottom: 0px;
left: 0px;
height: 100px;
width: 100%;
}
<body>
<div id="mainContainer">
<div id="topContainer">
This is the top div
</div>
<div id="bottomContainer">
This is the bottom div
</div>
</div>
</body>
这篇关于如何使用div分割底部和顶部的底部固定高度和顶部需要剩余空间的屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
