Question

我尝试了以下内容（在this question中描述）：

<html style="height: 100%">
  <body style="min-height: 100%; margin: 0">
    <div style="min-height: 100%; background: red">
    </div>
  </body>
</html>

没有doctype标题，它按预期工作 - div填充整个屏幕并在需要时展开。但是如果我添加<!DOCTYPE html>，它就会停止工作。我该如何解决这个问题？

Answer 1

将正文min-height: 100%更改为height: 100%。

Answer 2

＆＃13;

body
{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: orange;
}

div
{
  position: absolute;
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: cyan
}

＆＃13;

<html>
  <body>
    <div>
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    </div>
  </body>
</html>

＆＃13;

这对你有好处吗？我用position: absolute覆盖了div，然后在y轴上滚动。

Answer 3

我想你需要应用溢出：auto和更具体如果想在水平上滚动使用overflow-x：auto反之亦然垂直。

<html style="height: 100%">
  <body style="min-height: 100%; overflow:auto;  margin: 0">
    <div style="min-height: 100%; background: red">
    </div>
  </body>
</html>

Plunker

如何使div始终填满整个视口，但如果内容较大则允许滚动？

3 个答案: