我有一个小提琴(http://jsfiddle.net/pwnagecss/LnNYv/(,需要帮助使类侧边栏和右内容包装器自动填充到高度。
.HTML
<div class="wrapper">
<div class="sideBar">
</div>
<div class="rightContentWrapper">
<div class="rightContent">
</div>
</div>
</div>
.CSS
.wrapper {
width: 960px;
height: 100%;
margin: 0 auto 20px auto;
padding: 0;
background-color:black;
}
.wrapper:after{
clear: both;
display: block;
height: 0;
visibility: hidden;
content: "0020";
}
.sideBar {
float: left;
width: 200px;
background-color:blue;
min-height: inherit;
height: 100%;
}
.rightContentWrapper {
float: left;
width: 760px;
height: 100%;
min-height: inherit;
}
.rightContent {
margin: 0 auto;
background-color: red;
min-height: inherit;
}
任何帮助不胜感激
你可以尝试 CSS3 flexbox 模块,像这样:
html,body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
height: 100%;
width: 100%;
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.sideBar {
width: 220px;
background: green;
}
.rightContentWrapper {
background: orange;
-moz-box-flex: 1;
-webkit-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
请查看演示。
用于显示table-cell
定义display table-cell
属性的左右部分
像这样
.rightContentWrapper ,.sideBar{
display:table-cell;}
.rightContent{height:100%;}
演示
它不起作用的原因是因为.sidebar
和.rightContent
都设置为min-height:inherit
为了使min-height:inherit
正常工作,您需要为包装元素定义高度,而不是100%
而是实际值,即700px
。
此外,您的.rightContent
将首先继承.rightContentWrapper
,该没有最小高度声明。因此不会将任何东西传递给您的.rightContent
为了使其正常工作,请在包装器上设置固定的最小高度和 rightContentWrapper。或者使用 javascript 或 jquery 根据任何条件(可能是视口高度(动态设置高度?
我看到你没有标记jquery,但如果你想让它用于跨浏览器,这里是jquery的方式。
演示 http://jsfiddle.net/LnNYv/1/
$(document).ready(function(){
$('.wrapper').each(function(){
var max_height = $(this).height();
$(this).children('.sideBar').css('height',max_height);
$(this).find('.rightContent').css('height',max_height);
});
});