Css content height 100% is scrollig page

Question

I have a header and content divs in my html page. I want to set an image or map in my content that will be 100% but does not appear scroll bar. Fit the height of page with header and content.

<div class="head">
      Header
</div>
<div class="content">
     <img class="image" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg"/>
</div>

And my CSS is like this.

html, body {height: 100%}
.head{
  border: 1px solid red;
  height: 100px;
  width: 100%;
}
.content{
  border: 1px solid blue;
height: 100%;
  width: 100%;
}
.image{
  height: 100%;
  width: 100%;
}

Most likely a duplicate to [how to make DIV height 100% between header and footer](http://stackoverflow.com/questions/10228280), [Div height 100% excluding header](http://stackoverflow.com/questions/8172102) or [Get div to take up 100% body height, minus fixed-height header and footer](http://stackoverflow.com/questions/15021573) — t.niese, May 25 '16 at 08:54

GolezTrol · Answer 1 · 2016-05-25T14:30:59.113

100% + 1px border is more than 100%.

To fix that, remove the border or use

box-sizing: border-box

Additionally, your .content has a height of 100%. That is 100% of the client height of its parent. It's not the remaining height, and it doesn't take other children into account. So the .head is added to that height, and together they will be 100% + 100px + 4px (for borders) of the total page height leasing to a scrolling range of 104px.

The vertical scrollbar in return will consume some of the horizontal space, so you might get a horizontal scrollbar as well because of that.

You could consider using calc to solve this by making the height:

.content {
  height: calc(100% - 104px);
}

Css content height 100% is scrollig page

1 Answers1