Question

有没有办法做到这一点？我不希望内容在没有可滚动的情况下进入屏幕下方。（这适用于屏幕小于大多数人的人）

Answer 1

根据我的理解，这就是你在做什么：

<!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（scroll-div），您将获得滚动条。

Answer 2

NB： Levi Putna在pointing out中是正确的，只有在<div>为空时才会出现此行为。

两个选项：

您可以设置min-height和min-width <body>。
您可以在调整窗口大小时使用JavaScript在height上设置<body>。

设置min-height和min-width ：

例如，如果绝对定位的<div>是400×300像素：

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

限制：

Internet Explorer 6 缺乏对此的支持，尽管有很容易修复的问题。此时，min-height几乎适用于所有其他浏览器。
无法通过过度补偿来适应动态大小的<div>。

动态设置height（调整窗口大小时）：

给定一个400×300像素的绝对定位<div>，位于[0,0]：

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，相对于文档而不是offset parent获取位置。

Answer 3

如果您使用的是jquery，请使用$(window).resize(function(){...});，或仅使用<body onresize="myResize()" >进行原生javascript。

无论如何，如果绝对位置元素低于屏幕，则会出现身体滚动条？

3 个答案: