Question 43023 in Html Question posted in
Some basic documentation can be found here.

Make Flexbox Take Full Height Of Screen – Html

I have a flexbox with two sections. One of the left (small section) and the second one on the right (large section).

enter image description here

How can I make both sections take up full screen and prevent awkward white space like you see in the image.

Here’s my code global code:

html {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

Here’s my flexbox container code:

.container {
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 100%;
}

Here’s my flexbox children code:

.largesection{
  padding: 5px;
  border-radius: 4px;
  height: 100vh;
  width: 100%;
  background-color: #f6f6f7;
}

.smallsection {
  background-color: #fff;
  padding-top: 25px;
  padding-bottom: 30px;
  height: 100vh;
  width: 30%;
  border-right: 1px solid #e1e3e5;
}

How can I fix this? Also, The samll section on the left side is actually overflowing.

Tags:

2

Answers


  1. 0

    The problem is the height of the .container. It is limited to the height of the viewport. When scrolling (as the left .smallcontainer has an overflow) this results in the "missing" background color at your yellow mark.

    Setting the container’s children also to height: 100vh prevents that your test have success.

    Solution:

    1. Remove the children’s height (or set it to height: auto;)
    2. Set the height of .container to height: fit-content;

    Here the test sample:

    /* Global Code: */

html {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

* {
  box-sizing: border-box;
}


/* Flex Container */

.container {
  display: flex;
  flex-direction: row;
  height: fit-content;      /* not:  heigth: 100vh; */
  min-height: 100%;
  
  background-color: #bbf;   /* Helper-code to        */
  margin: 2%;               /* visualize the problem */
}



/* Flex Container children */

.largesection{
  padding: 5px;
  border-radius: 4px;
  width: 100%;
  background-color: #f6f6f7;
  
  display: flex;           /* Helper-code to adapt the sample */
}

.smallsection {
  background-color: #fff;
  padding-top: 25px;
  padding-bottom: 30px;
  width: 30%;
  border-right: 1px solid #e1e3e5;

  background-color: #fffa;  /* Helper-code: make BG transparent to see the parent's BG */
}



/* Helper-code to adapt the sample's layout */

.largesection p {
  width: 50%;
  font-size: 1.3em;
}

.largesection img {
  min-width: 100%;
}
    <div class="container">
    <div class="smallsection">
        <p>Here is the left column.</p>
        <p>To be long enough here some lorem ipsum:</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus rutrum posuere. Sed vitae auctor sem. Quisque a elit a elit accumsan varius. Morbi vel faucibus ante, faucibus sagittis justo. Morbi porta ex a magna tempus sagittis. Sed varius, nulla in bibendum rhoncus, dui odio maximus quam, in posuere lorem nisi quis ex. Nulla facilisi. Sed lacinia, enim et tempus sagittis, ex arcu tincidunt nisl, et hendrerit diam magna a lorem. Nam porttitor leo mauris, sed sagittis enim consectetur nec. Integer pretium tincidunt nisl, et semper lorem rhoncus ac. Etiam vestibulum molestie interdum. Maecenas augue leo, blandit nec magna iaculis, tincidunt semper turpis. Nulla ullamcorper odio quam. Nulla sed semper elit. In ipsum mauris, ultricies ut tempus quis, mattis eget felis. Curabitur molestie rhoncus nisl, et molestie sapien ultricies eget.</p><p>Quisque elementum sodales faucibus. In tempor, sapien sit amet convallis ullamcorper, arcu nibh ultrices lacus, eu suscipit nulla augue vel lectus. In gravida, sapien sed blandit tempus, leo nunc interdum tortor, et iaculis purus ligula in odio. Vestibulum commodo sit amet ligula et gravida. Praesent rutrum blandit pellentesque. In mattis lorem accumsan, vulputate massa in, accumsan magna. Phasellus sit amet aliquam diam. Cras orci urna, cursus vel felis non, rutrum iaculis nibh. Aenean vel magna blandit, luctus odio et, accumsan mi. Sed at ipsum neque. Curabitur dolor sapien, tempor sit amet fringilla et, auctor non purus. Quisque feugiat orci non maximus interdum. Duis faucibus nunc est, in posuere metus fermentum suscipit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut a hendrerit lacus. Pellentesque placerat ante in dapibus vestibulum.</p><p>Maecenas in urna at mi vulputate commodo. Proin dapibus porta risus in volutpat. Aenean sollicitudin scelerisque sodales. Aenean molestie lorem id magna rutrum aliquet. Aenean euismod dui vel purus porta hendrerit. Maecenas vel consectetur turpis, vel bibendum neque. Nulla vehicula dui ex, id tincidunt ligula sagittis in. Cras ut viverra purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis, massa ut mattis sollicitudin, quam neque sagittis diam, in congue metus lectus at nisi.</p><p>Quisque sapien mauris, dapibus sed eleifend nec, rhoncus eget risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas eu quam at lacus aliquet ultrices. Nulla et tellus sit amet ipsum fringilla lacinia luctus in lacus. Aenean auctor vulputate blandit. Duis a nulla lacinia, placerat magna a, ultricies lorem. Donec non nulla odio.</p>
    </div>
    <div class="largesection">
        <p>Nunc non lorem quam. Vestibulum odio nibh, pretium nec iaculis sit amet, aliquet nec elit. Etiam iaculis pretium urna sagittis luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean aliquet tincidunt dui, non or nare lacus mattis quis. Maecenas sapien dolor, rhoncus sit amet dictum quis, dictum a dolor. Integer sollicitudin arcu eu libero luctus, et facilisis urna tempus. Phasellus vitae libero eget magna imperdiet feugiat. In hac habitasse platea dictumst.</p>
        <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADIAQMAAAD82yWhAAAAA1BMVEU/f72VOjV/AAAAIUlEQVRo3u3BMQEAAADCoPVPbQ0PoAAAAAAAAAAAAIAXAyfYAAGcQGgRAAAAAElFTkSuQmCC"></p>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    This is a 2-column full-height layout.

    You can give it border, padding, etc. to syle it for your purpose.

    * {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
.container,
.smallsection,
.largesection {
  min-height: 100%;
}
.container {
  display: flex;
}
.smallsection {
  width: 30%;
  border-right: 1px solid #e1e3e5;
  background: silverr; /* your color #fff */
}
.largesection {
  width: 70%;
  background: silver;
  background-color: #f6f6f7;
}
    <div class="container">
  <div class="smallsection">
    Left column<br>abc<br>abc<br>abc
  </div>
  <div class="largesection">
    Right column<br>def<br>def<br>def
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search