如何讓DIV達到視口底部？

什麼改變這樣的：如何讓DIV達到視口底部？

<!DOCTYPE html> 
<html> 
<head><title></title></head> 
<body> 
<div style='background-color:lime;height:100%'> 
<p>line 1</p> 
<div style='background-color:pink'> 
<p>line 2</p> 
<p>line 3</p> 
</div> 
</div> 
</body> 
</html>

http://jsfiddle.net/naqE6/這說明（當前結果）：

將顯示（期望的結果）：

與綠色DIV根據需要伸展，以保持其內容和粉色DIV拉鍊根據需要到達視口底部（編輯：而不是進一步，導致滾動條），任何視口大小。

我在這裏見過其他的答案inc。聖盃問題，但似乎沒有解決這種情況。在您考慮將其標記爲重複之前，請注意：「... This DIV ...」。

以上圖片均來自谷歌瀏覽器。

來源

2016-10-06 ChrisJJ

您可能需要澄清一下您的問題..從小提琴，您的片段或截圖中不清楚您希望它看起來像什麼。真的，我建議看看CSS flexbox。這是目前解決任何佈局問題的解決方案。 – Julian

什麼不清楚http://i.stack.imgur.com/L3Y70.png ?? – ChrisJJ

是你想要的結果嗎？如果是這樣，你的問題並不清楚。 – Julian

像這樣的事情似乎適合你想要的結果：

<!DOCTYPE html> 
<html> 
    <head><title></title></head> 
    <body> 
     <div style="background-color:lime;position:absolute;width:99%;top:20px;bottom:10px;"> 
      <p>line 1</p> 
      <div style="background-color:pink;height:100%;"> 
       <p>line 2</p> 
       <p>line 3</p> 
      </div> 
     </div> 
    </body> 
</html>

來源

2016-10-07 00:50:00 henrheid

謝謝，但事實並非如此。它顯示一個垂直滾動條。 – ChrisJJ

'width：99％;'而不是'width：100％;'應該解決這個問題！ – henrheid

誤讀您的評論。我現在還將'bottom'屬性設置爲> 0，以刪除垂直滾動條。已更新答案以反映此更改。 – henrheid

<!DOCTYPE html> 
<html> 
<head><title></title> 
<script src="jquery-3.1.1.min.js"></script> 
<script src="jquery.sizes.js"></script> 
</head> 
<body> 
<div id='outer' style='background-color:lime'> 
<p>line 1</p> 
<div id='inner' style='background-color:pink'> 
<p>line 2</p> 
<p>line 3</p> 
<p id='debug'></p> 
</div> 
</div> 
<script> 
console.log('------------------------------------------------------------------'); 
/*global $*/ 
"use strict"; 

$(window).resize(function() 
{ 
var x = 0 + 
// + $('#inner').margin().top 
    + $('#inner').offset().top 
    + $('#inner').border().top 
    + $('#inner').padding().top 
     // inner content, inside height 
    + $('#inner').padding().bottom 
    + $('#inner').border().bottom 
    + $('#inner').margin().bottom 
    + $('#outer').padding().bottom 
    + $('#outer').border().bottom 
    + $('#outer').margin().bottom 
    + $('body').padding().bottom 
    + $('body').border().bottom 
    + $('body').margin().bottom; 

    var h = $(window).height() - x; 

    $('#inner')[0].style.height = h+'px'; 
} 
); 

$(window).resize(); 

</script> 
</BODY> 
</HTML>

給

。

以下是用於手動測試所有相關樣式屬性http://pastebin.com/kum349TM的住宿的CSS代碼。

如果有人可以建議減少或消除JS，太棒了。

來源

2016-10-10 00:03:58 ChrisJJ

如何讓DIV達到視口底部？

回答

相關問題