無論如何，如果絕對位置元素在屏幕下方，使身體滾動條出現？

有沒有辦法做到這一點？我不希望內容在屏幕下方滾動。（這是誰可能有較小的屏幕比大多數人）無論如何，如果絕對位置元素在屏幕下方，使身體滾動條出現？

來源

2012-01-18 Dylan Cross

你是指水平還是垂直（或兩者）？你能證明這個問題嗎？ http://jsfiddle.net//http://jsbin.com/ – thirtydot 2012-01-18 12:11:16

垂直。只需製作一個絕對定位的div，其高度超過當前屏幕高度即可瞭解我的意思（我現在遠離我的筆記本電腦，或者我會演示） – 2012-01-18 12:17:50

NB：列維普特納是正確的pointing out，如果<div>是空的這種行爲只發生。

兩個選項：

你可以設置一個min-height和min-width的<body>。
您可以在調整窗口大小時使用JavaScript在<body>上設置height。

設置min-height和min-width：

例如，如果絕對定位<div>是400個× 300像素：

body { 
    min-height: 400px; 
    min-width: 300px; 
}

限制：

Internet Explorer 6 缺少對此的支持，雖然有簡單的黑客來解決這個問題。在這一點上，min-height在幾乎所有其他瀏覽器中工作。
沒有辦法容納動態大小的<div>，期望通過過度補償。

動態設置height（當被調整大小的窗口）：

鑑於絕對定位的400個× 300像素，位於[0,0] <div>：

var $win = $(window); 

$win.resize(function(){ 
    var height = Math.max(400, $win.height()); 
    var width = Math.max(300, $win.width()); 
    $('body').css({ 
     height: height, 
     width: width 
    }); 
});

或者，如果<div>的尺寸或位置可變：

var $win = $(window); 
var $div = $('#thediv'); // the absolutely positioned div 

$win.resize(function(){ 
    var offset = $div.offset(); 
    var height = $div.outerHeight() + offset.top; 
    var width = $div.outerWidth() + offset.left; 

    height = Math.max(height, $win.height()); 
    width = Math.max(width, $win.width()); 

    $('body').css({ 
     height: height, 
     width: width 
    }); 
});

通過使用outerHeight和outerWidth，包括填充和邊框。通過使用offset（而不是CSS top和left，如果你正在使用jQuery或乾脆<body onresize="myResize()" >爲本地JavaScript上的位置相帶到文件，不給offset parent。

來源

2012-01-18 12:15:54 PPvG

好的，謝謝我會嘗試在我回到我的筆記本電腦時。（我也不擔心IE 6或更早的版本，我選擇不支持更早的版本，因爲我的網站使用socket io很多，並且不支持比6更遠的版本。 – 2012-01-18 12:19:28

如果您滿意要使用JavaScript來解決這個問題，你應該在調整窗口大小時將'body'高度設置爲絕對定位'div'的高度。 – thirtydot 2012-01-18 12:23:05

如何檢測窗口大小？ – 2012-01-18 12:27:54

使用$(window).resize(function(){...});。

來源

2012-01-18 12:47:44

據我瞭解，這是你在做什麼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
     <title>Insert title here</title> 
    </head> 
    <body> 
     <div id="scroll-div" style="position:absolute; height:2000px;"></div> 
    </body> 
</html>

，並期望得到一個滾動條？從我所瞭解的瀏覽器不會呈現div或至少滾動條，直到你添加一些內容。

如果你只是添加一些內容到div（滾動div），你會得到滾動條。

來源

2012-01-18 13:28:18

+1，即使技術上沒有OP的問題的答案。謝謝讓我意識到我是盲目地認爲這是由div的位置造成的...... :-) – PPvG 2012-01-18 13:43:38

無論如何，如果絕對位置元素在屏幕下方，使身體滾動條出現？

回答

相關問題