DIV填满(横向/纵向)
2016-12-19 本文已影响0人
智多牛
<!-- 纵向填满 -->
<div id="A"></div>
<div id="B"></div>
<style>
html,body
{
width : 100%;
height : 100%;
margin : 0;
padding: 0;
}
#A
{
width : 100%;
height: 50px;
background-color: #666;
}
#B
{
width : 100%;
background-color: #999;
position: absolute;
top : 50px;
bottom: 0px;
left : 0px;
}
</style>
<!-- 横向填满 -->
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
<style>
html,body
{
width : 100%;
height : 100%;
margin : 0;
padding: 0;
}
#left
{
width : 50px;
height: 100%;
background-color: #666;
float: left;
}
#content
{
height: 100%;
background-color: #999;
position: absolute;
top : 0px;
bottom: 0px;
right : 50px;
left : 50px;
}
#right
{
width : 50px;
height: 100%;
background-color: red;
float: right;
}
</style>