CODEWITHSUNDEEP
htmlcss
Blackjack00
Blackjack00

Reputation: 179

Set Div inside body to 100% height less body

I have created a basic layout following this example:

<body>
<div id="header"></div>
<div id="content"></div>
</body>

With the following CSS Applied:

body {
height: 100%;
}

#header {
height: 70px;
}

#content {
height: 100%;
display: block;
}

My content tag is 100% of my body tag, resulting in an extra 70px of div height and causing overflow/scroll bars. I want the page to be responsive to the height of the browser but I do not want to set both divs inside my body with a %, as I need my header to be consistently 70px. How can I achieve this?

Upvotes: 0

Views: 668

Answers (3)

Oriol
Oriol

Reputation: 288670

You can use fixed positioning:

#header, #content {
  position: fixed;
  left: 0;
  right: 0;
}
#header {
  top: 0;
  height: 70px;
  background: red;
}
#content {
  top: 70px;
  bottom: 0;
  background: green;
}
<div id="header"></div>
<div id="content"></div>

Upvotes: 2

Vitorino fernandes
Vitorino fernandes

Reputation: 15981

demo - http://jsfiddle.net/utv69qze/

you can use calc() also set you html height to 100%

#content {
  height: calc(100% - 70px);
}

body, html {
    height: 100%;
}

Upvotes: 0

jmore009
jmore009

Reputation: 12933

you can use CSS's calc():

#content{
  height: calc(100% - 70px);
  display: block;
}

This will minus 70px from the current screen height

Upvotes: 0

Related Questions