0

I tried the following (described in this question):

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

Without doctype header, it works as expected - div fills the entire screen and expands if needed. But if I add <!DOCTYPE html>, it stops working. How can I fix this?

Community
  • 1
  • 1
Rogach
  • 26,050
  • 21
  • 93
  • 172

3 Answers3

1

Change min-height: 100% of body to height: 100%.

Igor Adamenko
  • 861
  • 1
  • 8
  • 20
1

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

This any good for you? I've overlayed a div with position: absolute, then made it scrollable on the y-axis.

Luke
  • 3,985
  • 1
  • 20
  • 35
1

I guess you need to apply overflow:auto and More specific if want scroll on horizontal use overflow-x:auto vice-versa for vertical.

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

Plunker

squiroid
  • 13,809
  • 6
  • 47
  • 67