How to increase div height to match the height of next div?

Question

I want to get a page with a header and a menu and content areas.

This is my code.

HTML:

<div class="header">Title</div>
<div class="menu">
    <ul>
        <li>option 1</li>
        <li>second option</li>
    </ul>
</div>
<div class="content">
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
</div>

CSS

.header {
    background-color: yellow;
    padding: 10px;
}

.menu {
    background-color: blue;
    float: left;
    width: 20%;
}

.content {
    background-color: red;
    float: left;
    width: 80%;
}

http://jsfiddle.net/x1q03qfk/

As you can see in the jsfiddle, .menu is shorter than .content, but I want it to take the same height of .content.

If I replace the float:left by display: table-cell it works but I want to avoid that solution.

I also tried position: absolute on .menu and top:0, bottom:0 but with no luck.

Thanks in advance!

Answer 1

There is a modern way to do it with flexbox.

.header {
    background-color: silver;
    padding: 10px;
}
.main {
    display: flex; /*this is the magic one*/
}
.menu {
    background-color: yellow;
    width: 20%;
}
.content {
    background-color: gold;
    width: 80%;
}

<div class="header">Title</div>
<div class="main">
    <div class="menu">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div class="content">
         <h1>Hello World</h1>
        <p>Ennui literally art party, selfies iPhone exercitation try-hard commodo twee reprehenderit nihil irure Echo Park pour-over kitsch. Beard Intelligentsia locavore mixtape, odio aesthetic hella listicle seitan organic vinyl. Ennui exercitation deserunt tousled four dollar toast, ad pop-up vegan wolf minim whatever dreamcatcher.</p>
        <p>Ennui literally art party, selfies iPhone exercitation try-hard commodo twee reprehenderit nihil irure Echo Park pour-over kitsch. Beard Intelligentsia locavore mixtape, odio aesthetic hella listicle seitan organic vinyl. Ennui exercitation deserunt tousled four dollar toast, ad pop-up vegan wolf minim whatever dreamcatcher.</p>
    </div>
</div>

I believe table + table-cell is a better choice if you want it to work on all major browsers.

.header {
    background-color: silver;
    padding: 10px;
}
.main {
    display: table;
}
.menu, .content {
    display: table-cell;
    vertical-align: top;
}
.menu {
    background-color: yellow;
    width: 20%;
}
.content {
    background-color: gold;
    width: 80%;
}

<div class="header">Title</div>
<div class="main">
    <div class="menu">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div class="content">
         <h1>Hello World</h1>
        <p>Ennui literally art party, selfies iPhone exercitation try-hard commodo twee reprehenderit nihil irure Echo Park pour-over kitsch. Beard Intelligentsia locavore mixtape, odio aesthetic hella listicle seitan organic vinyl. Ennui exercitation deserunt tousled four dollar toast, ad pop-up vegan wolf minim whatever dreamcatcher.</p>
        <p>Ennui literally art party, selfies iPhone exercitation try-hard commodo twee reprehenderit nihil irure Echo Park pour-over kitsch. Beard Intelligentsia locavore mixtape, odio aesthetic hella listicle seitan organic vinyl. Ennui exercitation deserunt tousled four dollar toast, ad pop-up vegan wolf minim whatever dreamcatcher.</p>
    </div>
</div>

Answer 2

Just use the correct markup

* {
  box-sizing: border-box
}
body {
  margin: 0
}
.header {
  background-color: yellow;
  padding: 10px;
}
.menu {
  background-color: blue;
  width: 20vw;
  height: 100%;
  position: absolute;
  top: 0;
  right: 100%
}
.content {
  background-color: red;
  float: right;
  width: 80vw;
  position: relative
}

<div class="header">Title</div>

<div class="content">
  <div class="menu">
    <ul>
      <li>option 1</li>
      <li>second option</li>
    </ul>
  </div>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
</div>

Answer 3

When the DOM loads just set the height of menu to be the same as content:

Here is an example using jQuery:

$(".menu").height($(".content").height());

Here is an example using Native JS:

var contentHeight = document.getElementsByClassName("content")[0].clientHeight;
document.getElementsByClassName("menu")[0].style.height = contentHeight+"px";

Answer 4

Have you tried (for example) something like:

.menu {
background-color: blue;
float: left;
width: 20%;
min-height: 437px;

}