1

コンテンツを囲む 2 つのスパン div があります。高さを埋めてほしい。height: 100%;スクロールが不要な場合は問題なく動作しますが、ユーザーがスクロールする必要があるほどページが長くなると、スパンは最初の高さだけ存在し、高さ全体を埋めません。何か案は？jsfiddle: http://jsfiddle.net/2fvcF/4/ 何らかの理由でスパンも表示されません。

4

3 に答える 3

1

jQuery で使用$(document).height()して、高さ 100% で動作させることができます。例えば

$(document).ready(function() {

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

});
于 2012-08-30T08:37:59.967 に答える
1

浮遊要素は主流から外れます。このようなものを使用する必要があります

于 2012-08-30T08:30:50.787 に答える
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 を少し変更すると、DIV をテーブル/セルとして表示する javascript/jQuery を使用する必要がなくなります。

#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 に答える