How to extend a div to fill the whole page

Question

I am building a page with two columns side-by-side that should fill the entire page. Both columns should both be 50% of the available width with no margin or padding on either side and take up 100% of the available height depending on the resolution.

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body>* {
  flex-shrink: 0;
}

.login-column {
  float: left;
  width: 50%;
  background-color: #F4F6F9;
  margin: 0;
}

.news-column {
  float: left;
  width: 50%;
  background-color: #75BFF0;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
  /* Standard syntax (must be last) */
  margin: 0;
  flex-grow: 1;
}

<div class="row">
  <div class="login-column">
    <h1>Login</h1>
  </div>
  <div class="news-column">
    <h1>News</h1>
  </div>
</div>

Currently, the divs have no padding or margin on the top, left, and right; however, the background color only extends to the end of the text. I want the background to extend to the bottom of the page, without a scrollbar.

On a side note, I am using divs. Is this still recommended or should I be using the new, HTML5 things such as article, aside, .etc?

you can add height: 100vh to your divs – phoenixstudio Nov 25 '19 at 16:46 — phoenixstudio, Nov 25 '19 at 16:46

score 2 · Answer 1 · answered Nov 25 '19 at 16:49

2

In order to get a DIV to fill the page in height you need to use this :

CSS

div {
height: 100vh;}

Also everything is explained in this post : How to make a div 100% height of the browser window

answered Nov 25 '19 at 16:49

VirussInside

187
17

score 0 · Accepted Answer · answered Nov 25 '19 at 16:51

remove floats, you can add height to your columns 100vh but in your head section of the page should be <meta name="viewport" content="width=device-width, initial-scale=1">

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body>* {
  flex-shrink: 0;
}
.row {
  display: flex;
}
.login-column {
  flex: 0 0 50%;
  background-color: #F4F6F9;
  margin: 0;
  height: 100vh;
}

.news-column {
  flex: 0 0 50%;
  background-color: #75BFF0;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
  /* Standard syntax (must be last) */
  margin: 0;
  height: 100vh;
}

<div class="row">
  <div class="login-column">
    <h1>Login</h1>
  </div>
  <div class="news-column">
    <h1>News</h1>
  </div>
</div>

score 0 · Answer 3 · answered Nov 25 '19 at 16:57

0

You can simply include height in div classes. .login-column {height: 100%;} .login-column {height: 100%;}

answered Nov 25 '19 at 16:57

deepak bangwal

1
1

sromero · Answer 4 · 2019-11-25T17:08:42.307

Did you try to create a content div that contains the columns, i would try something like this.

* {
      padding: 0;
      margin: 0;
    }
    
    body, html {
    height: 100%;
    }
    
    .columns-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .login-column {
      display: flex
      background-color: #F4F6F9;
      margin: 0;
      width: 50%;
    }

   .news-column {
     display:flex;
     background-color: blue;
     margin: 0;
     width: 50%;
     height: 100%;
   }

<div class="columns-container ">
    <div class="login-column">
        <h1>Login</h1>
    </div>
    <div class="news-column">
        <h1>News</h1>
    </div>
</div>

score 0 · Answer 5 · answered Nov 25 '19 at 17:03

You shouldn't use floats and position: absolute, unless you absolutely know what you're doing. I suggest using a flex container to do what you want, and use max-height to make the two columns (sections) fill out the whole screen height. If you just use height: 100vh, the columns will stay at that height blocking things from overflowing.

Also note how I use class syntax to reuse CSS code.

body {
  margin: 0;
  padding: 0;
}

.flex-container {
  width: 100%;
  display: flex;
}

section {
  min-height: 100vh;
  flex-basis: 50%;
  box-sizing: border-box; /* To let padding be part of the width */
  padding: 1rem;
}

section.left {
  background-color: #F4F6F9;
}

section.right {
  background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
}

<body>
  <div class="flex-container">
    <section class="left column">
      Ladidaa
    </section>

    <section class="right column">
      Tralalaa
    </section>
  </div>
</body>

score 0 · Answer 6 · answered Nov 25 '19 at 17:21

Regarding use of div, article and aside, actually they are used for to code semantic Html to get the best result for Search Engine Optimization and other bots related activity also good for other developers to understand code flow. Not answering your primary question as it already answered many times, let me know if you are not satisfied with other answers :)

Note: Using div is all fine in your case, don’t worry.

How to extend a div to fill the whole page

6 Answers6