我有两个围绕我的内容的跨度 div。我想让他们填满高度。height: 100%;
当不需要滚动时工作正常,但是一旦页面足够长以至于用户需要滚动,跨度只存在于第一个高度,然后不填充整个高度。有任何想法吗?jsfiddle: http: //jsfiddle.net/2fvcF/4/ 出于某种原因,它甚至没有显示跨度。
问问题
271 次
3 回答
1
浮动元素脱离了主流。你必须使用这样的东西
于 2012-08-30T08:30:50.787 回答
1
您可以$(document).height()
在 jQuery 中使用以使其工作在 100% 高度。例如
$(document).ready(function() {
$('#left').height($(document).height());
$('#right').height($(document).height());
});
于 2012-08-30T08:37:59.967 回答
0
function set_properties () {
$('#left').css('height', function() {
return $('#contentArea').innerHeight() + "px";
});
$('#right').css('height', function() {
return $('#contentArea').innerHeight() + "px";
});
}
$(document).ready(function() {
$(window).scroll(set_properties);
$(window).resize(set_properties);
set_properties();
});
或更改一点 CSS 无需使用 javascript/jQuery 将 DIV 显示为表格/单元格。
#contentArea {
width: 800px;
display: table;
color: #CCC;
margin-top: 0px;
background-color: #000;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999;
border-left-color: #999;
height: 100%;
border-top-style: none;
border-bottom-style: none;
}
#contentArea #tc1,
#contentArea #tc3 {
display: table-cell;
width: 100px;
background-color: #F00;
}
<div id="contentArea">
<div id="tc1"> </div>
<div id="tc2">
<div class="header"> ... </div>
<div class="ui-widget" style="margin: 0px;"> ... </div>
<div class="main"> ... </div>
</div>
<div id="tc3"> </div>
</div>
于 2012-08-30T08:35:32.467 回答