CODEWITHSUNDEEP
htmlcss
Rogach
Rogach

Reputation: 27220

How to make div always fill entire viewport, but allow scrolling if content is bigger?

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?

Upvotes: 0

Views: 277

Answers (3)

squiroid
squiroid

Reputation: 14027

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

Upvotes: 1

Luke
Luke

Reputation: 4063

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.

Upvotes: 1

Igor Adamenko
Igor Adamenko

Reputation: 878

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

Upvotes: 1

Related Questions