无论如何，如果绝对位置元素位于屏幕下方，则使正文滚动条出现

Anyway to make body scrollbar appear if absolute position element goes below screen?

本文关键字：正文 滚动条 屏幕 如果 位置 元素 于屏幕 无论如何      更新时间：2023-09-26

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

据

我了解，这就是你正在做的事情：

<!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(，您将获得滚动条。

注意：Levi Putna正确地指出，这种行为只有在<div>为空时才会发生。

两个选项：

  1. 您可以设置min-height并min-width <body>。
  2. 您可以在调整窗口大小时使用 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 像素的绝对定位<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 (，位置是相对于文档而不是偏移父级获取的。

如果您使用的是jquery，请使用$(window).resize(function(){...});，或者只是为本机javascript <body onresize="myResize()" >。

相关文章：