change height to fill the bottom of the screen

Question

I have created three columns layout as taught here, but the problem is that I want the column height to fill upto the bottom of the screen. Here is the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.left, .right {
  width: 25%;
}

.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Three Unequal Columns</h2>

<div class="row">
  <div class="column left" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column middle" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column right" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

In short I want to change the height of .column, so that the 3 columns extends upto the bottom of the screen.

user `height:100vh` this will inc the size and make is as big as the screen. — Alen.Toma, Feb 22 '19 at 07:17
@Alen.Toma But the problem is that I have an upper offset also that needs to be subtracted from the height. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_three_columns_unequal test here, it is adding an scroll also which I don't need. — Vedanshu, Feb 22 '19 at 07:25
you either substract it or use js to calculate the value and substract all element before and after so somthing like this `ceneterColumnHeight = screenH-topH-FooterH` — Alen.Toma, Feb 22 '19 at 07:28
@Alen.Toma how to change the `height` property of the `.column` from js ? — Vedanshu, Feb 22 '19 at 07:29
See here how i organized the css heights https://www.w3schools.com/code/tryit.asp?filename=G1F9VBZIWFVV if you still want to use js let me know — Alen.Toma, Feb 22 '19 at 07:43
Here is a solution using `calc` and `var` https://www.w3schools.com/code/tryit.asp?filename=G1F0IQ19DPUP — Alen.Toma, Feb 22 '19 at 08:05

score 2 · Accepted Answer · edited Feb 22 '19 at 08:15

2

I had used the flex property for easy understanding. There are two containers one the container class and other the column container. The container class will be given height of 100vh and the column container will be given flex: 1, which makes the column container to occupy the remaining vertical space.

Stack snippet

body {
 margin: 0;
}
.container {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

.column-container {
  display: flex;
  background-color: grey;
  flex: 1;
}

.column {
  flex: 1;
}

<div class="container">
  <h2>
    Three Unequal Columns
  </h2>
  <div class="column-container">
    <div class="column">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>
    <div class="column">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>
    <div class="column">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>
  </div>

edited Feb 22 '19 at 08:15

Asons

84,923
12
110
165

answered Feb 22 '19 at 07:39

zakir

2,390
2
13
16

he dose not want to use 100vh – Alen.Toma Feb 22 '19 at 07:49
To fill up the screen, he needs to either use 100vh or calc() function, but again in calc function you need to give 100vh. – zakir Feb 22 '19 at 07:55
@zakir Next time, use a snippet...now I updated with one so you see how to works. – Asons Feb 22 '19 at 08:16
Dose android support calc ? this is my firsttime using it, is it really safe to use it ? – Alen.Toma Feb 22 '19 at 08:16

Alen.Toma · Answer 2 · 2019-02-23T06:14:54.400

Here is a solution using calc() and var

without calc()

using calc() below

* {
  box-sizing: border-box;
}

:root {
  --screen:97vh;
  --footer:20%;
  --header:20%;
  --padding:10px;
  --center:calc(var(--screen) - var(--footer) - var(--header) - var(--padding) * 2);
 
}
p{margin:0;}
.container{
  height:var(--screen);
}
.header{
    background:red;
    height: var(--header);
}

.footer{
   background:red;
   height:var(--footer);
}



.row {
  display: grid;
  grid-template: 150px / auto auto auto;
  grid-gap: var(--padding);
  background-color: #2196F3;
  grid-template-rows: 100% 100%;
  min-height: var(--center);
}

<div class="container"> 
<div class="header">
<p>Three Unequal Columns</p>
</div>
<div class="row">
  <div style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>
<div class="footer">
  <p>Three Unequal Columns</p>
</div>
</div>

change height to fill the bottom of the screen

2 Answers2

Linked