On a web page with 2 main columns, how to keep both columns full height of the page always

Question

html, body {
  margin:0;
  padding:0;
}

body {
  min-height:100vh;
}

* {
  box-sizing: border-box;
}

.column1 {
  min-height:100vh;
  float:left;
  width:25%;
  padding-right:15px;
  background:white;
  padding-top: 5%;
  position: relative;
}


#column2 {
  min-height: 100vh;
  width:75%;  
  float:right;
  background: #b1ffab;
  padding-top: 5.2%;
  padding-left: 25px;
  position: relative;
}

<nav id="column1" class="column1">
  <h1><a id="dw" href="{{ url_for('home') }}">Denise Wong</a></h1> 
  <ul id="navigation">
    <li><a class="nav-link" href="{{ url_for('home') }}">Home</a></li>
    <li><a class="m-t nav-link" href="{{ url_for('music_therapy') }}">Music Therapy</a></li>
    <li><a class="nav-link" href=" {{ url_for('about') }}">About Denise</a></li>
    <li><a class="nav-link" href="{{ url_for('what_I_can_offer') }}">What I can offer</a></li>
    <li><a class="nav-link" href="{{ url_for('updates') }}">Updates</a></li>
    <hr id="nav-hr">
    <li id="contact-me-link"><a href="{{ url_for('contact') }}">Contact Me</a></li>
  </ul>

  <!--Settings-->
  <div id="settings">
    <ul id="font-settings">
      <li>Font size</li>
      <li><button>Standard</button></li>
      <li><button>Big</button></li>
    </ul>
    <ul id="brightness-settings">
      <li>Brightness</li>
      <li><button>Dark</button></li>
      <li><button>Light</button></li>
    </ul>
    <ul id="language-settings">
      <li>Language</li>
      <li><button>English</button></li>
      <li><button>香港</button></li>
    </ul>
  </div>
</nav>

<div id="column2">
    <div id="column2-content">
Hello, this content box/column needs to be full height of page
    </div>
</div>

I am trying to make a portfolio website that has 2 main columns: 1 for navigation and 1 for content. I'd like the background of column 2 (content) to always be the full height of the page.
However, when column1's content is longer (goes further down the page) than column2's content then column2s background only seems to be cover 100% height of the top part of the visible page, i.e. if I scroll down then the background ends.
Perhaps a couple of screenshots will help to explain.

Desired behaviour:

What happens when column1's content is longer than column2's:

Notice the white space below the green? That should be green too like in the first screenshot.

Am using the following CSS to achieve this:

body {
    min-height:100vh;
}

.column1 {
    min-height:100vh;
    float:left;
    width:25%;
    padding-right:15px;
    background:white;
    padding-top: 5%;
    position: relative;
}

#column2 {
    min-height: 100vh;
    width:75%;  
    float:right;
    background: #b1ffab;
    padding-top: 5.2%;
    padding-left: 25px;
    position: relative;
}

Have been stuck on this for hours and am trying to finish this website for a friend. Any suggestions would be appreciated.

Answer 1

I recommend you using Flexbox layout method instead of using float: property.

Here's a layout for your case:

.flexbox-wrapper {
  display: flex;
  min-height:100vh;
}

.column1 {
  padding-right:15px;
  background:white;
  padding-top: 5%;
  width:25%;
}

#column2 {
  background: #b1ffab;
  padding-top: 5.2%;
  padding-left: 25px;
  width:75%;  
}

<div class="flexbox-wrapper">
    <div class="column1"></div>
    <div id="column2"></div>
</div>

Flexboxes also have properties like flex-direction: column and flex-direction: row, that allows you to make blocks stay horizontal or vertically aligned. You can also always put one flexbox into another.

See full documentaion: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Answer 2

This can be easily achievable using flexbox. I made a demonstration for you. Have a look. Thanks me later.

.wrap {
  display: flex;
}
.wrap .column {
  max-width: 50%;
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.column2 {
  background: green;
}

<div class="wrap">
<div class="column column1">
<p>Hello This is a Paragraph</p>
<p>Hello This is a Paragraph</p>
<p>Hello This is a Paragraph</p>
<p>Hello This is a Paragraph</p>
<p>Hello This is a Paragraph</p>
<button>Button</button>
</div>
<div class="column column2"></div>
</div>

As you can see that column2 has no content but it takes same height as column 1.

Answer 3

Make sure you have html and body elements set to height: 100%;. Then do the same with the column2. Try this:

html, body {
  height: 100%;
}

.column2 {
  height: 100%;
  width:75%;  
  float:right;
  background: #b1ffab;
  padding-top: 5.2%;
  padding-left: 25px;
}

This should work on column that is some div element.

Answer 4

It can be achieved through display: table:

html, body {
  width: 100%;
  height: 100%;
}

.wrap {
  display:table;
  height:100%;
  width: 100%;
}

.wrap > div {
  display:table-cell;
  height:100%;
}

.left{
  background-color: lightgreen;
}

.right{
  background-color: lightpink;
}

<div class="wrap">
    <div class="left">
      This is very long text<br />
      This is very long text<br />This is very long text<br />This is very long text<br />This is very long text<br />This is very long text<br />This is very long text<br />This is very long text<br />
      This is very long text<br />This is very long text<br />This is very long text<br />This is very long text<br />This is very long text<br />

    </div>
    <div class="right">
      The right side
    </div>
  </div>