使跨度填充高度 - 即使滾動時

我有兩個跨度div圍繞我的內容。我想讓他們填滿身高。 height: 100%;在沒有需要滾動的情況下可以正常工作，但是一旦頁面足夠長以至於用戶需要滾動跨度時纔會出現第一個高度，然後不填充整個高度。有任何想法嗎？ jsfiddle：http://jsfiddle.net/2fvcF/4/由於某些原因甚至沒有顯示跨度。使跨度填充高度 - 即使滾動時

來源

2012-08-30 michaellindahl

你能用jQuery嗎？ – Gustonez

@Gustonez是的，只要它不會出現問題，並且可以與IE和其他惡意瀏覽器一起使用。在過去，我相信我看到的jQuery解決方案總是很糟糕。 – michaellindahl

浮動元素不屬於主流。你必須使用像this

來源

2012-08-30 08:30:50 Peinguin

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-30 08:35:32 Gustonez

我只是在'

11. 使內容div填充剩餘高度

12. 使ImageButton填充父級高度

13. CodeMirror填充Div並使Div 100％高度

14. 使元素填充可用高度

15. 讓跨度填充剩餘寬度？

16. 計算填充瀏覽器高度所需的確切高度

17. CSS：填充與高度

18. 填充高度超過100％

19. 即使當list_view_items沒有填充其完整高度時滾動列表視圖項目

20. 填充事業部高度

21. 使用動態高度頁腳滾動動態高度div

22. CSS Flex動態填充可用高度（無高度或位置）

23. DIv填充剩餘的垂直空間，即使div上面有動態高度？

24. Radgrid填充容器高度

25. CSS：告訴塊元素填充高度

26. 填充添加到div寬度/高度？

27. 寬度等於高度，填充問題

28. CSS高度：填充可用空間。沒有固定的高度

29. Android獲取滾動位置的listview填充不同的高度

30. 滾動視圖中的textview不填充屏幕的高度

使跨度填充高度 - 即使滾動時

回答

相關問題