1

我有两个围绕我的内容的跨度 div。我想让他们填满高度。height: 100%;当不需要滚动时工作正常，但是一旦页面足够长以至于用户需要滚动，跨度只存在于第一个高度，然后不填充整个高度。有任何想法吗？jsfiddle： http: //jsfiddle.net/2fvcF/4/ 出于某种原因，它甚至没有显示跨度。

4

3 回答 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">&nbsp;</div>
  <div id="tc2">
    <div class="header"> ... </div>
    <div class="ui-widget" style="margin: 0px;"> ... </div>
    <div class="main"> ... </div>
  </div>
  <div id="tc3">&nbsp;</div>
</div>
于 2012-08-30T08:35:32.467 回答