我已经设法用 display:table-cell
完成了这个,但是我遇到了一个问题,将 masonry.js 实现到一个 table-单元格
,它只是不起作用。
所以我必须对普通的 div 执行此操作。
我需要左栏的宽度为 40px
,并且高度随着内容的增加而增加。主列需要为 100%
宽度或动态占据剩余空间。
现在我有了这个,它在结构上有效,但不适用于 masonry.js。
CSS
div#wrapper{
display:table;
height:100%;
width:100%;
}
div#sidebarWrapper{
display:table-cell;
min-width:40px;
height:100%;
background-color:#444;
}
div#contentWrapper{
display:table-cell;
height:100%;
position:relative;
}
div#content{
border-left:1px solid #ddd;
border-top:1px solid #ddd;
overflow:hidden;
padding-bottom:100px;
margin-top:195px;
}
div.clear{clear:both;}
HTML
<div id="wrapper">
<div id="sidebarWrapper">
</div> <!-- sidebar wrapper -->
<div id="contentWrapper">
<div id="content">
</div><!-- content-->
<div class="clear"></div>
</div><!-- wrapper wrapper -->
</div><!-- site wrapper -->
基本上我需要这个没有表格的版本。非常感谢帮助。
最佳答案
我假设您需要第二列才能流畅,所以..
Demo (做了另一个demo,子元素上不需要overflow: hidden;
)
我猜你在这里不需要任何解释,因为一切都是不言自明的,从你的情况不需要的子元素中删除了 overflow: hidden;
。
<div class="wrapper">
<div class="left_container">Hello</div>
<div class="right_container">World this is just a random junk text</div>
</div>
html, body {
height: 100%;
}
.wrapper {
height: 100%;
}
.left_container {
float: left;
width: 200px;
background: #f00;
min-height: 100%;
}
.right_container {
min-height: 100%;
background: #000;
margin-left: 200px;
color: #f00;
}
注意:如果右侧列超过视口(viewport)高度
,则不会扩展左侧列,在这种情况下我们通常使用display: table;
来实现纯CSS解决方案,但您已经首先排除了这一点,因此您可以选择 jQuery.. 或者您可以在您认为可能超过视口(viewport) height< 的容器上使用
.overflow-y: auto;
/
$(function(){
$(window).resize(function(){
var documentHeight = $(document).height();
$('.left_container').css('height',documentHeight + 'px');
}).resize();
});
Demo 2 (有内容)
编辑:Mr.Alien 的想法是对的,我只是做了一点调整:)
jQuery(function($){
$(window).resize(function(){
var containerHeight = $('.right_container').height();
$('.left_container').css('height',containerHeight + 'px');
}).resize();
});
关于html - 2列布局,第一列固定宽度,100%高度,第二列100%宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20680960/