[ANSWERED] html – Height 100% causes scroll bar to appear

Question 1

Apply the property box-sizing: border-box; to all of your elements (selector *) so the extra space caused by borders, padding, and margins is then included in the 100% and not added to the 100% (i.e. 100% + 5px border).

* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0;
}

#content
{
    height: 100%;
    border: solid blue 5px;
    margin: 0;
    
}

#heading {
  height: 40%;
  border: solid red 5px;
}

img {
  height: 100%;
}

<body>  

<div id="content">

    <div id="heading">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" alt="" class="image">
    </div>

</div>


</body>

Question 2

the border: solid blue 5px; is causing the scroll bar to appear.

It ends up having 10px more height than the parent element “body” (5px bottom +5px
top).

if you really need a border, you subtract it from the 100%.

Question 3

Try to add to html tag an overflow property like so:

body, html {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0;
  overflow-y: hidden;
}

Question 4

Try to use 100vh in place of 100% for height and also set box-sizing:border-box; for all elements, I have made some changes to the css, please check if it works

*{
  box-sizing:border-box;
 }
body, html {
  height: 100vh;
  width: 100%;
  margin: 0;
  overflow:hidden;
}

#content
{
    height: 100vh;
    border: solid blue 5px;
    margin: 0;

}

#heading {
  height: 40%;
  border: solid red 5px;
}

img {
  height: 100%;
}

Hope it works.

Question 5

Add this line on top of your css, that should prevent scrolling

* {
  box-sizing: border-box;
}

Question 6

This question is everywhere and the solution is always the same but it never works for me and I have no idea why! I simply need my div to fill the entire view port without creating a scroll bar. Who knew this would be so difficult. Everyone says to just set body and html margins to zero but this doesn’t work. I still have a vertical scroll bar! I’m getting really frustrated and I would really appreciate some help. Here is the JSFiddle https://jsfiddle.net/davdarobis/d3k4hv6q/23/.

body, html {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0;
}

#content
{
    height: 100%;
    border: solid blue 5px;
    margin: 0;
    
}

#heading {
  height: 40%;
  border: solid red 5px;
}

img {
  height: 100%;
}

<body>  

<div id="content">

    <div id="heading">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" alt="" class="image">
    </div>

</div>


</body>

I can’t use the top: 0 bottom: 0 solution because this seems to screw up the height: 100% property of its children. I’m completely stuck. Any ideas? Thanks.

Bollate

[ANSWERED] html – Height 100% causes scroll bar to appear

By

Solution 1 :

Solution 2 :

Solution 3 :

Solution 4 :

Solution 5 :

Problem :

Comments

Comment posted by T Tse

Comment posted by Soban

Comment posted by Ramon de Vries

Comment posted by Soban

Comment posted by box-sizing

Comment posted by Dallin Davis

By

Related Post

[ANSWERED] html – select all elements within a parent class

[ANSWERED] html – Hidden Div Text Reappears?

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate