CODEWITHSUNDEEP
htmlcss
Bronzato
Bronzato

Reputation: 9332

Having my wrapper div element full height

I need to have the wrapper div element to be full height and so adjust its height depending on the whole height of the page so no scrollbars are displayed.

My html:

<header>
  I am the header and my height is fixed to 40px.
</header>

<div id="wrapper">
  I am the wrapper
</div>

My css:

html,body {
  height: 100%;
  background: blue;
  margin: 0;
  padding: 0;
}
header {
  height: 40px; <-------- this value is fixed 
  background-color: green;
}
#wrapper {
  height: 90%;
  background-color: red;
}

I know the height: 90% on the wrapper is wrong but I don't know what to do.

Here is the jsFiddle: https://jsfiddle.net/3putthcv/1/

Upvotes: 0

Views: 48

Answers (2)

Vucko
Vucko

Reputation: 20834

You can use CSS calc():

#wrapper {
  height: calc(100% - 40px); /* 40px is the header value */
  background-color: red;
}

JSFiddle

Or display:table/table-row:

html,
body {
  height: 100%;
  width: 100%;
  background: blue;
  margin: 0;
  padding: 0;
}
body {
  display: table;
  width: 100%;
}
header {
  display: table-row;
  height: 40px;
  background-color: green;
}
#wrapper {
  display: table-row;
  height: 100%;
  background-color: red;
}
<header>I am the header and my height is fixed to 40px.</header>
<div id="wrapper">I am the wrapper</div>

JSFiddle

Upvotes: 2

Jason Sperske
Jason Sperske

Reputation: 30416

What about setting the size based on the top, left, right and bottom like this (demo) (full disclosure, it won't work if the content is too large):

#wrapper {
background-color: red;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
}

Upvotes: 1

Related Questions