我在这里是因为其他类似的问题对我的特定问题没有帮助。
#right div 高度如何才能达到 100%? 只有 css 解决方案需要。谢谢。
http://jsfiddle.net/elturko/86nX9/
HTML
<div id="wrap">
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrap{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
background:#ddd
}
#header{
height:104px;
background:#d5a1b3;
}
#left{
float:left;
width:219px;
background:#a2d025;
}
#right{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
overflow:hidden;
background:#FFF;
margin:0 15px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding:14px;
}
#footer{
clear:both;
height:15px;
background:#ed653a;
}
最佳答案
这里有 2 个纯 CSS 解决方案
不固定任何高度(页眉/页脚)或宽度(左列)。
其实我更喜欢第二种方案。 (即使他的浏览器支持较少)
1 - 使用 CSS 技巧
这是一个完全响应式设计,适用于所有浏览器(IE10、FF、Chrome、Safari、Opera、移动浏览器)
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.LeftMenu
{
height: 100%;
float: left;
}
.Content
{
overflow: auto;
height: 100%;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
text-align: center;
}
.Header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}
2 - 使用 Flex
这种布局也可以使用flex来实现,但是目前的浏览器支持是纯的。 这是一个 Working Fiddle 仅 FF、Chrome、IE10。
HTML:(更简单)
<header>
</header>
<section class="Middle">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</section>
<footer>
</footer>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
text-align: center;
}
body
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.Middle
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.Content
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 0 0;
overflow: auto;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
footer
{
background-color: #b5a8b7;
}
关于html - 100% height child div in parent wrap div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19412618/