我正在尝试创建一个高度为100px且宽度为100％的头部区域.
我需要2列,左边一列是250px宽,100％是高度,直到页脚.右列应为页脚宽度的100％和页脚高度的100％.页脚应位于页面底部,高度为100px,宽度为100％.
即使2列中没有内容,我也需要它们向下延伸到页脚并让页脚可见而不向下滚动到页面.
我需要2列,左边一列是250px宽,100％是高度,直到页脚.右列应为页脚宽度的100％和页脚高度的100％.页脚应位于页面底部,高度为100px,宽度为100％.
即使2列中没有内容,我也需要它们向下延伸到页脚并让页脚可见而不向下滚动到页面.
这是我到目前为止所拥有的.
<div id="top"><p>Lorem ipsum dolor sit amet</p></div>
<div id="left"><p>Lorem ipsum dolor sit amet</p></div>
<div id="right"><p>Lorem ipsum dolor sit amet</p></div>
<div id="bot"><p>Lorem ipsum dolor sit amet</p></div>
body,html {
height: 100%;
}
body {
margin: 0px;
}
p {
margin: 0px;
}
#top {
height: 100px;
background-color: #F4F4F4;
}
#left {
width: 250px;
height: 100%;
background-color: #878787;
float: left;
margin-bottom: -100px;
}
#right {
background-color: #323232;
height: 100%;
margin-bottom: -100px;
}
#bot {
clear: right;
height: 100px;
background-color: #DCDCDC;
margin-top: -100px;
z-index: 100;
position: relative;
}
这是另一个表格的例子
<table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0" class="" id=""> <tr> <td colspan="2" style="background-color: powderblue; height: 100px;">Header</td> </tr> <tr> <td style="background-color: gray; width: 350px;">Left Col</td> <td style="background-color: DarkSeaGreen">Right Col</td> </tr> <tr> <td colspan="2" style="background-color: tomato; height: 100px;">Footer</td> </tr> </table>
解决方法
这是一个简单的CSS网格解决方案(我使用了50px而不是100px,因此我们可以在简化的代码段中看到它)
html {
height: 100%;
}
p {
margin: 0px;
}
body {
min-height:100%;
margin:0;
display:grid;
grid-template-rows:50px 1fr 50px;
grid-template-columns:250px 1fr;
grid-template-areas:
"top top"
"left right"
"bot bot";
}
#top {
grid-area:top;
background: linear-gradient(#F4F4F4,blue);
}
#left {
grid-area:left;
background: linear-gradient(#878787,red);
}
#right {
grid-area:right;
background: linear-gradient(#323232,green);
}
#bot {
grid-area:bot;
background: linear-gradient(#DCDCDC,purple);
}
<div id="top"><p>Lorem ipsum dolor sit amet</p></div> <div id="left"><p>Lorem ipsum dolor sit amet</p></div> <div id="right"><p>Lorem ipsum dolor sit amet</p></div> <div id="bot"><p>Lorem ipsum dolor sit amet</p></div>
以下是flexBox：
body,html {
height: 100%;
}
p {
margin: 0px;
}
body {
margin:0;
display:flex;
flex-wrap:wrap;
}
#top,#bot {
height:50px;
width:100%;
background: linear-gradient(#F4F4F4,blue);
}
#left {
width:250px;
min-height:calc(100% - 2 * 50px);
background: linear-gradient(#878787,red);
}
#right {
flex:1;
min-height:calc(100% - 2 * 50px);
background: linear-gradient(#323232,green);
}
<div id="top"><p>Lorem ipsum dolor sit amet</p></div> <div id="left"><p>Lorem ipsum dolor sit amet</p></div> <div id="right"><p>Lorem ipsum dolor sit amet</p></div> <div id="bot"><p>Lorem ipsum dolor sit amet</p></div>
