如何使用div将HTML页面拆分为两行,其中底部div的高度为100px,顶部div占用剩余空间。
目前我有以下内容,但是这里top div与底部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>
我尝试过使用display:table;这在Chrome和Firefox中运行良好,但遗憾的是不在IE9中(这是一项要求)。任何帮助将不胜感激。
答案 0 :(得分:2)
只需将#topContainer
更改为
#topContainer {
border: 1px solid red;
position: absolute;
top: 0px;
left: 0px;
bottom: 100px; //set bottom
height: calc(100% - 100); //calculate height
width: 100%;
}
其余代码效果很好。
这是更新的代码段。
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>
答案 1 :(得分:2)
除了以上方法,朋友们说
你可以使用display: table;
它从不顶部div重叠底部div
对于IE9中的show display: table;
,您可以使用
<meta http-equiv="X-UA-Compatible" content="IE=edge">
html&amp;的CSS:
html,
body,
object {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
div {
margin: 0px;
padding: 0px;
}
#mainContainer {
display: table;
height: 100%;
width: 100%;
}
#top{
display: table-row;
}
#topContainer {
display: table-cell;
border: 1px solid red;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
#bottom{
display: table-row;
}
#bottomContainer {
display: table-cell;
border: 1px solid blue;
bottom: 100px;
left: 0px;
height: 100px;
width: 100%;
}
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="mainContainer">
<div id="top">
<div id="topContainer">
This is the top div
</div>
</div>
<div id="bottom">
<div id="bottomContainer">
This is the bottom div
</div>
</div>
</div>
</body>
</html>
答案 2 :(得分:0)
试试这个html标记:
<div class="top">
This is your top div
</div>
<div class="bottom">
This is your bottom div
</div>
匹配样式:
.bottom {
position: fixed;
bottom: 0px;
width: 100%;
height: 100px;
/* Added styles for demo */
background-color: black;
color: white;
}
答案 3 :(得分:0)
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: 86.1%; // exact percentage
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>