I'm trying to create 2 columns, each occupying width of 50%. I need the column height to stretch to the full height of the screen, even when empty, so I can display the backfround color. I tried adding position: absolute but am having mixed results where only one column appears

My HTML

.lcolmn {
  width: 50%;
  height: 100%;
  background-color: red;
  float: left;
}
.rcolmn {
  width: 50%;
  height: 100%;
  background-color: blue;
  float: left;
}
.wrapper {
  background: green;
  margin: 0;
  padding: 0px;
}

<div class="wrapper">
   <div class="lcolmn">
       <div class="lcontent"></div>
   </div>
   <div class="rcolmn"></div>
</div>

I'm trying to create 2 columns, each occupying width of 50%. I need the column height to stretch to the full height of the screen, even when empty, so I can display the backfround color. I tried adding position: absolute but am having mixed results where only one column appears

My HTML

.lcolmn {
  width: 50%;
  height: 100%;
  background-color: red;
  float: left;
}
.rcolmn {
  width: 50%;
  height: 100%;
  background-color: blue;
  float: left;
}
.wrapper {
  background: green;
  margin: 0;
  padding: 0px;
}

<div class="wrapper">
   <div class="lcolmn">
       <div class="lcontent"></div>
   </div>
   <div class="rcolmn"></div>
</div>

• javascript
• jquery
• html
• css

• 7 wrapper is your css is targeting classes, not ids as in your html. You should change your html ids to classes – Axnyff Commented Jan 4, 2017 at 21:22
• 4 height: 100vh; and then visit a pub. – Charlie Schliesser Commented Jan 4, 2017 at 21:23
• try to use vh instead of % – IARKI Commented Jan 4, 2017 at 21:25
• @Charlie S vh has issues in safari – Joseph Commented Jan 4, 2017 at 21:27
• downvoted question and upvoted ments, the downvote only so that you learn the (very basic) difference between styling divs by id and class properly through CSS code (forever!). You can do this many different ways, 100vh is a little bit too modern for my liking, but coolness outweighs any drawback – Jeffrey - Humanized Commented Jan 4, 2017 at 21:28

4 Answers 4

Here's the proper solution, without vh and optimized CSS:

html, body {
  height: 100%;
  margin: 0;
}

.column {
  width: 50%;
  height: 100%;
  float: left
}

#lcolumn {
  background-color: red;
}

#rcolumn {
  background-color: blue;
}

<div class="column" id="lcolumn">
  <div class="lcontect"></div>
</div>
<div class="column" id="rcolumn"></div>

Here is solution, HTML:

<div id="wrapper">
  <div class="lcolmn">

  </div>
  <div class="rcolmn">

  </div>
</div>

and SASS:

html,
body {
  margin: 0;
  padding: 0;
  height:100%;
}
#wrapper {
  height:100%;
  .lcolmn,
  .rcolmn {
    width: 50%;
    height:100%;
    float:left;
  }
  .lcolmn {
    background-color: red;
  }
  .rcolmn {
    background-color: blue;
  }
}

Here you can check example: https://jsfiddle/vladavip88/1cd7rq0f/

The elements inside the wrapper class current have no set height given. Height 100% doesn't work in CSS (see this answer here https://stackoverflow./a/4789845/4912604)

What does work thought is the CSS tag "vh" or "view height". Add this to the lcolumn and rcolmn classes

.lcolmn {
  width: 50%;
  height: 100%;
  background-color: red;
  float: left;
  height: 100vh;
}
.rcolmn {
  width: 50%;
  height: 100%;
  background-color: blue;
  float: left;
  height: 100vh;
}

Here is a fiddle: https://jsfiddle/iamnottony/1jw4e256/

Please start to use box-sizing: border-box.
Just set it to *, *::after, *::before. so in css:

*, *::after, *::before {
    box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

.column {
  width: 50%;
  height: 100%;
  float: left
}

#lcolumn {
  background-color: red;
}

#rcolumn {
  background-color: blue;
}