14
我有一個垂直的菜單在屏幕的左側，我想採取100％的分辨率的高度，但如果div（菜單）需要更多，我想要出現滾動。 我的問題：我有一個高度爲100％的div，並且溢出auto。 我只需要在該div上滾動，但該div必須是屏幕分辨率的100％。現在，如果我像這樣，滾動需要所有的頁面，但如果我把固定高度的div它工作正常。但我需要100％身高。 非常感謝！100％高度div和溢出：自動
A
回答
2
我知道的2個共同解決這個：
1）使用JavaScript來確定視口的高度，並明確元素的高度設置爲相同的（例如沿yourMenuDivElement.style.height = document.documentElement.clientHeight;線的東西你」。 d還必須確保捕獲窗口大小調整事件以在窗口高度改變時重置菜單的高度
2）更簡單的僅CSS解決方案是將html和body元素的高度設置爲都是100％。我相信這通常可以正常工作，儘管您的網頁上可能有其他內容可能會受到文檔高度設置爲100％的負面影響 - 但絕對值得嘗試。 CSS會是這樣的：
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
div#menu {
height: 100%;
overflow: auto;
}
13
http://cssdesk.com/yxShB
http://gearsdigital.com/sandbox/
http://jsfiddle.net/WB4Qc/
在試驗成功：
OSX
- FF 3.6
- Safari瀏覽器4 + 5
- 鉻47.0
WIN7
- IE 7
- IE 8
- FF 3.5
見上文我的例子。代碼工作正常...嘗試調整窗口大小。一旦瀏覽器的底部到達滾動條出現在菜單div上的最後一個列表元素，就會看到。
HTML：
<div id="menu">
<ul>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
<li>owepwew</li>
</ul>
</div>
的CSS：
* {margin:0;padding:0;}
html, body{
height:100%;
background:#eee;
}
#menu {
background:#ccc;
width:220px;
height:100%;
}
#menu ul {
height: 100%;
overflow: auto;
}
+0
在IE7中，一個灰色的滾動條出現在右邊。我不清楚爲什麼這是令人不安的 - 它是一個垂直滾動條，而不是水平滾動條。這個相同的滾動條也出現在IE6中，但是它似乎也起作用，儘管我沒有做足夠的測試來確保在其中有更多內容時它不會開始做一些奇怪的事情。 – 2011-02-04 19:10:05
+0
IE7/6中的灰色滾動條是imho本機和瀏覽器/操作系統特定的。它與我的CSS無關...... :) – gearsdigital 2011-02-04 19:16:25
+0
正如他所說，這些滾動條默認存在。 – reisio 2011-02-05 10:45:20
4
有一個farily簡單的答案，使用高度：在CSS的HTML和身體的選擇均爲100％，可以有效地告訴菜單是100％的高度，但需要時滾動。
我在jsFiddle.net爲您做了一個例子。（調整結果窗口中查看效果）
希望它能幫助:)
1
我已經完成了對網頁內容的「內容」的div gearsdigital響應：
http://jsfiddle.net/Guillaume/NnW5r/11/show/
代碼： http://jsfiddle.net/Guillaume/NnW5r/11/
調整窗口大小和滾動頁面，看它是否符合您的需要
0
件
作品隨處可見
JS
function overflowFillHeight(el,listener){
var sumH = 0;
if(el){
var parEls = el.parentNode.childNodes;
var style = null;
if(parEls.length > 1){
for(var j = 0; j < parEls.length; j++){
if(parEls[j].nodeType != 3){
if(parEls[j] != el){
sumH += parEls[j].clientHeight;
if(typeof window.getComputedStyle(parEls[j]) != 'undefined'){
style = window.getComputedStyle(parEls[j]);
}else if(typeof parEls[j].currentStyle != 'undefined'){
style = parEls[j].currentStyle;
};
if(style){
sumH += parseInt(style.marginTop);
sumH += parseInt(style.marginBottom);
sumH += parseInt(style.borderTopWidth);
sumH += parseInt(style.borderBottomWidth);
};
};
};
};
};
style = null;
if(typeof window.getComputedStyle(el) != 'undefined'){
style = window.getComputedStyle(el);
}else if(typeof el.currentStyle != 'undefined'){
style = el.currentStyle;
};
if(style){
sumH += parseInt(style.marginTop);
sumH += parseInt(style.marginBottom);
sumH += parseInt(style.borderTopWidth);
sumH += parseInt(style.borderBottomWidth);
};
el.style.height = (el.parentNode.clientHeight - sumH)+'px';
if(!listener){
window.addEventListener('resize',function(){
overflowFillHeight(el,true);
},false);
};
};
};
例如
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function overflowFillHeight(el,listener){
var sumH = 0;
if(el){
var parEls = el.parentNode.childNodes;
var style = null;
if(parEls.length > 1){
for(var j = 0; j < parEls.length; j++){
if(parEls[j].nodeType != 3){
if(parEls[j] != el){
sumH += parEls[j].clientHeight;
if(typeof window.getComputedStyle(parEls[j]) != 'undefined'){
style = window.getComputedStyle(parEls[j]);
}else if(typeof parEls[j].currentStyle != 'undefined'){
style = parEls[j].currentStyle;
};
if(style){
sumH += parseInt(style.marginTop);
sumH += parseInt(style.marginBottom);
sumH += parseInt(style.borderTopWidth);
sumH += parseInt(style.borderBottomWidth);
};
};
};
};
};
style = null;
if(typeof window.getComputedStyle(el) != 'undefined'){
style = window.getComputedStyle(el);
}else if(typeof el.currentStyle != 'undefined'){
style = el.currentStyle;
};
if(style){
sumH += parseInt(style.marginTop);
sumH += parseInt(style.marginBottom);
sumH += parseInt(style.borderTopWidth);
sumH += parseInt(style.borderBottomWidth);
};
el.style.height = (el.parentNode.clientHeight - sumH)+'px';
if(!listener){
window.addEventListener('resize',function(){
overflowFillHeight(el,true);
},false);
};
};
};
</script>
<style>
*{
margin:0px;
padding:0px;
}
html,body{
height:100%;
}
.g1{
margin-bottom:34px;
border:20px double #CCFF00;
}
</style>
</head>
<body>
<div style="height:100%; background:#F00;">
<div class="g1" style="height:37px; background:#00F;">1</div>
<div id="qqq" class="g1" style="background:#39F; overflow:auto; height:300px;">
<div style="height:1000px;">2</div>
</div>
<div style="height:100px; background:#060;">3</div>
</div>
<script>
overflowFillHeight(document.getElementById('qqq'));
</script>
</body>
</html>
相關問題
- 1. CSS溢出自動和高度100％
- 2. 子div高度100％內部位置：固定div +溢出自動
- 3. 設置溢出：自動與高度100％
- 4. 溢出：滾動和100％的高度
- 5. 100％的高度正在DIV溢出
- 6. 內容從div高度100％溢出
- 7. 100％高度溢出div容器
- 8. Div高度100％導致溢出問題
- 9. 兩個div：高度自動和100％
- 10. 溢出CSS高度：100％？
- 11. CSS溢出盒高度100％
- 12. 高度溢出問題：100％;
- 13. 寬度：自動;身高：100;和溢出：隱藏不按預期
- 14. 試圖獲得一個div/100％高度和溢出自動在Firefox中工作
- 15. 溢出（滾動） - 100％的容器高度
- 16. 溢出滾動條在Firefox中100％高度div上不顯示
- 17. 自動寬度和溢出div
- 18. 100％高度和100％寬度的文本溢出
- 19. div中的div，100％的高度使得屏幕上的溢出
- 20. CSS最大高度/寬度100％溢出
- 21. Chrome flexbox其他100％高度flexbox溢出100％高度
- 22. Div無法與高度自動或100％
- 23. 使div高度自動或100％？
- 24. Div高度/溢出問題
- 25. Bootstrap css - div高度和溢出
- 26. Div 100％高度滾動
- 27. div高度100％，滾動條
- 28. Div浮動左高度100％
- 29. Div 100％高度
- 30. 100％div高度
感謝你的答案。 第二個答案does not work form me ...我試過了，我得到所有頁面的滾動。但firt的解決方案可能是可行的... 我將嘗試它。 謝謝，真的非常感謝你的回答和你的時間 – mahoni 2010-08-02 14:17:43