身高100% 显示垂直滚动条

出于好奇，考虑下面的示例，为什么 # Container div 的边距会导致浏览器中出现一个垂直滚动条？容器的高度比设置为100% 的身体高度要小得多。

我已经为除 # 容器之外的所有元素将填充和边距设置为0。注意，我故意省略了 # Container div 上的绝对定位。在这种情况下，浏览器如何计算主体的高度，边距是如何影响它的？

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
padding:10px;
margin:50px;
border:1px solid black;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id='container'>
</div>
</body>
</html>

例子也在 JSFiddle上

116460 次浏览
小开
最佳答案

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 在这里 (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.

小开

I found a quick solution: try set height to 99.99% instead of 100%

小开

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).

小开

Add overflow: hidden; to html and body.

html, body {
height: 100%;
overflow: hidden;
}
小开

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)

小开 
html, body {
height: 100%;
overflow: hidden;
}

If you want to remove the body scrolling add the following style:

body {
height: 100%;
overflow: hidden;
}
小开

I saw this problem fixed before where you put all the contents of body in a div called wrap. Wrap's style should be set to position: relative; min-height: 100%;. To position #container div 50px from the top and left put a div inside wrap with a padding set to 50px. Margins will not work with wrap and the div we just made, but they will work in #container and everything inside it.

here's my fix on jsfiddle.

小开 
html,body {
height: 100%;
margin: 0;
overflow: hidden;
}

This worked for me

小开

adding float:left; is nice, but will interfere with central horizontal positioning using margin:auto;

if you know how big your margin is, you can account for that in your height percentage using calc:

height: calc(100% - 50px);

browser support is good, but only IE11+ https://caniuse.com/#feat=calc

小开

I have found a solution: add padding: 1px 0; to body prevents vertical scrollbars to appear

小开

Inspired by @BoltClock, I tried this and it worked, even when zoom out and in.

Browser: Chrome 51

html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
position: relative;
top: -20px;
}

I guess body was shifted down 20px.

小开 
/*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;
}
小开

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>

小开

It works for me:

html,
body {
height: 100%;
height: -webkit-fill-available; // Chrome
}


// Firefox
@-moz-document url-prefix() {
body {
box-sizing: border-box;
margin: 0;
padding: 1px;
}
}
小开

you can add non-breaking space into the body tag.

<body> &nbsp; <othertags>...</body>

提交答案