Body height 100% displaying vertical scrollbar

后端未结

关注

 13  2127

Out of curiosity, considering the example below, why does having the margin on the #container div cause a vertical scrollbar to appear in the browser? The container is much

相关标签:

13条回答

傲寒

2020-12-07 22:28

A bit late, but maybe it helps someone.

Adding float: left; to #container removes the scrollbar, as W3C says:

•Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

0 讨论(0)
发布评论:

提交评论
- 加载中...
暖寄归人

2020-12-07 22:29

If you paint the backgrounds of html and body (giving each its own color), you'll quickly notice that body is being shifted down along with #container, and #container itself isn't offset from the top of body at all. This is a side effect of margin collapse, which I cover in detail here (although that answer describes a slightly different setup).

It's this behavior that's causing the scrollbar to appear, since you've declared body to have 100% the height of html. Note that the actual height of body is unaffected, as margins are never included in height calculations.

0 讨论(0)
发布评论:

提交评论
- 加载中...
面向向阳花

2020-12-07 22:31
Add overflow: hidden; to html and body.
```
html, body {
  height: 100%;
  overflow: hidden;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
感动是毒

2020-12-07 22:32
Based upon @BoltClock♦'s answer, I fixed it by zeroing the margin...
so
```
html,body, #st-full-pg {
   height: 100%;
   margin: 0;
}
```
works where id "st-full-pg" is assigned to a panel div (which further contained panel-heading and panel-body)
0 讨论(0)
发布评论:

提交评论
- 加载中...

爱一瞬间的悲伤

2020-12-07 22:34

/*removes default margin & padding*/
html, body{
    padding: 0px !important;
    margin: 0px !important;
}

/*sets body height to max; and allows scrollbar as page content grows*/
body{
    min-height: 100vh;
}

0 讨论(0)

遥遥无期

2020-12-07 22:35

For those who are coming here for an easier to understand answer that even includes code samples, this answer (copied from here) is for you.

No JavaScript or definite pixel values (such as 100px) are required, just, pure CSS and percentages.

If your div is just sitting there on its own, height: 50% will mean 50% the height of the body. Normally, the height of the body is zero without any visible content, so 50% of that is just, well, zero.

This is the solution (based on this) (uncomment the background lines to get a visualisation of the padding):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html
{
  height: 100%;
  
  /* background: green; */
}

body
{
  /*
    100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
    This prevents an unnecessary vertical scrollbar from appearing.
  */
  height: calc(100% - 1em);
  
  /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

The above was written so that there would still be the usual padding. You could set the dimensions of the red div to 100% and still see padding on each side/end. If you don't want this padding, use this (although it doesn't look nice, I recommend you stick with the first example):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html, body
{
  height: 100%;
}

/* You can uncomment it but you wouldn't be able to see it anyway. */

/*
html
{
  background: green;
}
*/

body
{
  margin: 0;
  
 /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

0 讨论(0)