CODEWITHSUNDEEP
htmlcss
Willem van der Veen
Willem van der Veen

Reputation: 36610

responsive height of div

Working on a angular website using bootstrap and encountered a small issue.

HTML

<div class="container-fluid">
  <div class="row">
    <div class="content">
      random text
    </div>
  </div>
</div>

css:

.content {
    width: 100vw;
    height: 100vh;
}

I want the .content div to take up the full screensize, nothing more nothing less. However I already have a header element (fixed size 60px) above it so using 100vh will make it slightly more than the whole screensize (screensize+header).

How can I format my css in such a way that the .content div will always have a height of exactly the screen size?

Upvotes: 1

Views: 294

Answers (3)

Green
Green

Reputation: 544

you can use calc(); see here: https://developer.mozilla.org/en-US/docs/Web/CSS/calc or https://www.w3schools.com/cssref/func_calc.asp

<style>
    #myDiv {
       width: 100vw;
       height: calc(100vh - 60px);
    }
</style>
<body><div id="myDiv"></body>

Upvotes: 1

frnt
frnt

Reputation: 8795

You could use CSS calc() function to minus the header height which is 60px from .content height as below,

The calc() CSS function lets you perform calculations when specifying CSS property values.

.content {
    width: 100vw;
    height: calc(100vh - 60px); /*Add this*/
}


body {
  margin: 0;
}

header {
  background: red;
  height: 60px; /* Take this value and mius below using calc()*/
  color: #fff;
}

.content {
  width: 100vw;
  height: calc(100vh - 60px); /*Add this*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>Header</header>
<div class="container-fluid">
  <div class="row">
    <div class="content">
      random text
    </div>
  </div>
</div>

Upvotes: 5

Hash
Hash

Reputation: 8020

Use CSS calc()

  .content {
        width: 100vw;
        height: calc(100vh - 60px);
    }

Upvotes: 2

Related Questions