CODEWITHSUNDEEP
htmlcss
HeyShafty
HeyShafty

Reputation: 13

Make html page take at least 100% of view port if content is too small

Not-so-experienced developer here

I am currently working on a web page with a "Header - Content - Footer" design.

<html>
    <body>
        <div id="root">
            <div class="header">
                HEADER
            </div>
            <div class="content">
                CONTENT
            </div>
            <div class="footer">
                FOOTER
            </div>
        </div>
    </body>
</html>

I want the content div to take the remaining page space even when the content inside is not big enough to fill the div.

Here is the css that I came up with:

html, body, #root {
    min-height: 100vh;
}

body {
    margin: 0
}

.content {
    background-color: red;
    height: 100%;
}

.header {
    position: sticky;
    top: 0;
}

.header, .footer {
    height: 56px;
    width: 100%;
    line-height: 56px;
    background-color: green;
}

Although this works as intended when the content is larger than the viewport, it doesn't on the opposite case.
When looking through a developer console, the height values of the html, body, #root tags rightfully equals 100% of the viewport, but the content div does not take the remaining space (even when specifying height: 100%).

Why is that so?

Here is a jsfiddle: https://jsfiddle.net/c91p0yot/

Upvotes: 1

Views: 371

Answers (2)

dantheman
dantheman

Reputation: 3814

Set the content to be at least the height of the viewport minus the header and footer height.

html, body, #root {
    min-height: 100vh;
}

body {
    margin: 0
}

.content {
    background-color: red;
    min-height: calc(100vh - 112px);
}

.header {
    position: sticky;
    top: 0;
}

.header, .footer {
    height: 56px;
    width: 100%;
    line-height: 56px;
    background-color: #f8f9fa;
}
<body>
  <div id="root">
    <div class="header">
      HEADER
    </div>
    <div class="content">
      CONTENT
    </div>
    <div class="footer">
      FOOTER
    </div>
  </div>
</body>

Upvotes: 1

Dan Mullin
Dan Mullin

Reputation: 4415

Use the flexbox layout mode and make your <body> display: flex;

Then, give the .content a flex value of 1 which will force the .content to take up all remaining space.

Also get rid of the #root div

html
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

.content {
    background-color: red;
    flex: 1;
}

.header {
    position: sticky;
    top: 0;
}

.header, .footer {
    height: 56px;
    width: 100%;
    line-height: 56px;
    background-color: #f8f9fa;
}

Upvotes: 1

Related Questions