無法將div擴展到頁面底部。包括jsFiddle

無法將左右div展開到頁面底部，不多不少。無法將div擴展到頁面底部。包括jsFiddle

感謝，戴爾

2011-12-21 Dale

這是你的JS解決方案，先生

//Can place js in <head> tag 
$(document).ready(function(){ 
    var remHeight = $('html').height() - $('#top').height(); 
    $('#left').css('height', remHeight); 
    $('#right').css('height', remHeight); 
});

CSS：

body, html 
{ 
    height: 100%; 
} 
.top { 
    background: red; 
} 
.left { 
    width: 25%; 
    background: grey; 
    float: left; 
} 
.right { 
    width: 25%; 
    background: blue; 
    float: left; 
}

html：

<html> 
<body> 
    <div id="top" class="top"> 
     <div id="msg">hello</div> 
    </div> 
    <div id="left" class="left"> 
     left 
    </div> 
    <div id="right" class="right"> 
     right 
    </div> 
</body> 
</html>

http://jsfiddle.net/zTEhB/

來源

2011-12-21 21:36:39

完美！謝謝。假設我需要重新計算，如果窗口被加載後調整大小？ – Dale 2011-12-21 22:19:46

@Dale Np。是的，每當頁面內容更新時，您可能必須運行此操作。 – 2011-12-21 22:22:41

檢查：http://jsfiddle.net/5gqNn/

你需要指定的根元素的高度。

參考： https://developer.mozilla.org/en/CSS/height

的計算相對於所述包含塊的高度。如果明確指定了包含塊的高度不是，則該值計算爲自動。根元素（例如）上的百分比高度相對於視口。

來源

2011-12-21 20:03:28

謝謝。你把我引向我最初的問題。原來的問題是，左側和右側的div現在超出了頁面。我怎麼能防止這種情況發生，不知道頂部div的高度？我需要使用JavaScript嗎？ – Dale 2011-12-21 20:08:04

@Dale是否有助於向左右div添加「overflow-y：hidden;」（或「overflow：hidden;'）？ – 2011-12-21 20:18:50

http://jsfiddle.net/dNYkz/，用碎紙機溢出更新：隱藏使解決方案完成。好一個。 – 2011-12-21 20:21:20

你不得不說，身體和HTML標籤也是這樣的100％：

html, body{ 
    height:100%; 
    position: relative;} 
.top { 
    background: red; 
} 
.left { 
    position: relative; 
    width: 25%; 
    height: 100%; 
    background: grey; 
    float: left; 
    height:auto !important; /* real browsers */ 
    height:100%; /* IE6: treaded as min-height*/ 

    min-height:100%; 
} 
.right { 
    position: relative; 
    width: 25%; 
    height: 100%; 
    background: blue; 
    float: left; 

}

來源

2011-12-21 20:12:31 Spikey21

謝謝。左側和右側的div現在超出了頁面，這實際上是我原來的問題。我怎樣才能防止這種情況發生，不知道頂部div的高度？我需要使用JavaScript嗎？如果是這樣，那就是我需要聽到的。 – Dale 2011-12-21 20:17:37

如果它們超出了其他內容，則必須添加具有更高值的z-index。如果你想讓左邊和右邊的div始終位於最上面，你可以給它們：z-index：9999; – Spikey21 2011-12-21 20:21:09

爲什麼要添加一個z-index幫助？ – 2011-12-21 20:23:21

無法將div擴展到頁面底部。包括jsFiddle

回答

相關問題