HTML＆CSS如何防止div擴大窗口的高度？

如何防止包含展開頁面高度的長項目列表的div。我希望div佔據整個屏幕，但不會更多，這樣它就不會推下頁腳。HTML＆CSS如何防止div擴大窗口的高度？

2013-01-15 Mike

你有代碼可以看嗎？ – gotohales

那麼你打算如何展示不斷增長的內容呢？ – Learner

@Mihir我打算使用'css'' overflow：scroll;'屬性。 – Mike

使用JavaScript/jQuery的這個：

jQuery的解決方案：

<div id="content-div">some content here</div> 

$(document).ready(function() { 
    var height = $(document).height(); 
    height = height - (your footer height); 
    $("#content-div").css({ 'max-height' : height.toString() }); 
});

標準JavaScript解決方案：

<div id="content-div">some content here</div> 

function myfunction() { 
     document.getElementById('content-div').style.height = getDocHeight() + 'px'; 
} 

window.onload = myfunction(); 

document.getElementById('content-div').style.height = getDocHeight() + 'px'; 

function getDocHeight() { 
    var D = document; 
    return Math.max(
     Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), 
     Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), 
     Math.max(D.body.clientHeight, D.documentElement.clientHeight) 
    ); 
}

此外，改變CSS來：

#content-div { background-color:#1d1d1d; color:#eee; overflow-y: scroll; }

來源

2013-01-15 16:12:13 Learner

這可以做到不需要JavaScript？ – Mike

@Mike：看看我的解決方案 – DonCallisto

@DonCallisto - 你如何照顧動態高度？所有機器都有不同的分辨率和窗口大小。 – Learner

爲div容器設置特定高度，並且使用自動設置overflow-y以僅在div的內容大於container中設置的高度時才顯示滾動條。像這樣：

.container { 
    height: 500px; 
    overflow-y:auto; 
}

來源

2013-01-15 16:14:29 jmboiton

我想讓div的高度變得有些動態，因爲一些瀏覽器較小，而其他瀏覽器則更大 – Mike

哦！在這種情況下......爲什麼不在你的頁腳中使用'position：fixed'，並在其上設置'bottom：0'，這樣它就會一直顯示。 – jmboiton

沒有js，這是不可能的，因爲您的頁面可以以不同的分辨率查看。不同的決議意味着不同的高度事實上，當用戶調整瀏覽器窗口的大小時，您可能會需要這種行爲，對嗎？所以首先，找出瀏覽器的高度，從中減去頁腳的高度，並將此高度設置爲您的容器，我相信您希望在yaxis上進行滾動。這將解決問題。所有這些任務都非常簡單，你可以通過少量搜索來完成。

來源

2013-01-15 16:28:27 srijan

你是否在向@ Mihir的解決方案提出類似的建議（如果不是相同的話）？ – Mike

是的。如果您的頁腳具有動態高度，則可以使用相同的技術來查找其高度。事實上，我建議使用相同的技術來查找頁腳高度。 – srijan

HTML＆CSS如何防止div擴大窗口的高度？

回答

相關問題