Question

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

Answer 1

浮动元素不属于主流。你必须使用this

之类的东西

Answer 2

您可以在jQuery中使用$(document).height()使其工作100％高度。 E.g。

$(document).ready(function() {

   $('#left').height($(document).height());
   $('#right').height($(document).height());

});

Answer 3

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>

使跨度填充高度 - 即使在滚动时也是如此

3 个答案: