Question

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

我希望在内容隐藏后，正文应显示内容800px，但问题是如果我在正文中使用overflow:hidden它会隐藏视口中的所有内容，但我的视口高度为{{ 1}}所以我想滚动应该达到800px。

这是我的代码

HTML

678px

CSS

<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>

以下是问题的解答：https://jsfiddle.net/0b6g6886/

Answer 1

我认为你不能在<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 2

我不相信它对身体有效。尝试将所有块div放在包含div中，并针对此发送相同的样式。我更新了小提示给你看

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;
}

这将覆盖带有白色部分的div，覆盖它。

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

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

然后你可以按照上面的方式设置样式。

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>

如何设置溢出：在给定高度之后隐藏在体内而不是在视口高度之后？

3 个答案: