如何在给定高度之后而不是在视口高度之后在正文中设置 overflow:hidden？

Question

我有一个页面，我在其中将 <body> 的高度设置为 800px，但实际上内容超过了 800px。

我希望 body 应该显示内容到 800px 之后内容应该隐藏但是问题是如果我在 body 中使用 overflow:hidden 它隐藏了视口之外的所有内容但是我的视口高度是678px 所以我希望滚动条最大为 800px。

这是我的代码

HTML

<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>

CSS

body{
    height: 800px;
    overflow: hidden;
}
.block{
    background: #000;
    height: 100px;
    width: 100%;
    margin-bottom: 10px;
}

这是有问题的 fiddle：https://jsfiddle.net/0b6g6886/

Answer 1

我认为它不适用于 body。尝试将所有块 div 放在一个包含 div 中，并针对此发送相同的样式。我更新了 fiddle 以向您展示

https://jsfiddle.net/0b6g6886/1/

.blocks {
  height: 800px;
  overflow: hidden;
  position: relative;
}

.block {
  background: #000;
  height: 100px;
  width: 100%;
  margin-bottom: 10px;
}



<div class="blocks">
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
 </div>

根据注释说 div 需要直接在 body 部分中，没有换行 div，这有点 hacky，但你可以玩这样的东西：

body:after {
  content:'';
  position:absolute;
  top:800px;
  left:0;
  width:100%;
  height:1000px;
  background:#fff;
}

这将用白色部分覆盖 divs，覆盖它。

或者使用 jQuery 在其周围添加 div（如果可以添加 jQuery）：

$('body').prepend('<div class="blocks">');
$('body').append('</div>');

然后您就可以像上面那样设置样式了。

Answer 2

我认为您不能在 <body> 标签上执行此操作。

将所有内容包装在 'wrapper' div 中，它会如您所愿地工作：

https://jsfiddle.net/0b6g6886/

HTML:

<div class="wrapper">
  <div class="block"></div>
  <div class="block"></div>  
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

CSS:

.wrapper{
  height: 200px;
  overflow: hidden;
}
.block{
  background: #000;
  height: 100px;
  width: 100%;
  margin-bottom: 10px;
}

Answer 3

您需要在 body 标签内添加 DIV。给体内的 DIV 高度。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .bod{
                   height: 800px;
                   overflow: scroll;

                }
                .block{
                    background: #000;
                    height: 100px;
                    width: 100%;
                    margin-bottom: 10px;
                }
        </style>
    </head>
    <body>
    <div class="bod">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        </div>
    </body>
    </html>

如何在给定高度之后而不是在视口高度之后在正文中设置 overflow:hidden？

how to set overflow:hidden in body after given height not after viewport height?

html

css

overflow