CSS底部多余的空格
[英]CSS unwanted white space at bottom
问题描述
Context: I am making a website where the white bit running down the middle (the 'wrapper' div) is supposed to be the background for all the content on the page, whereas the red bit (the 'body') running down the sides operates as a border. 
内容：我正在制作一个网站，其中中间的白色部分（“包装” div）应该是页面上所有内容的背景，而红色的部分（“ body”）则是两侧的内容作为边界。 If I get rid of the 100% bottom-padding from the 'wrapper' div, the content I have on my website ends up with a background of red (background of the 'body' instead of the 'wrapper'). 如果我摆脱了“包装器” div的100％底部填充，则我在网站上拥有的内容将以红色背景（“主体”而不是“包装器”的背景）结束。 Nevertheless, if I have the 100% bottom-padding on the 'wrapper' div I can scroll further than the bottom of the page (all my content fits on one page at the moment, whereas I can scroll for at least two pages). 不过，如果我在'wrapper'div上有100％的底部填充，则可以滚动到比页面底部更深的位置（目前，我所有的内容都适合一页，而我可以滚动至少两页）。
Please accordingly explain how I can keep the content's background as the wrapper div without the scrolling ability going beyond the end of the content. 请相应地说明如何在不使滚动能力超出内容结尾的情况下如何将内容的背景保留为wrapper div。 For example, in the code presented, there should be no ability to scroll down beyond the first screen because there is no content. 例如，在显示的代码中，由于没有内容，因此不能向下滚动到第一个屏幕之外。 The amount I can scroll on the code presented is the same as the amount I can scroll on my website. 我可以在显示的代码上滚动的数量与我在网站上可以滚动的数量相同。
<!doctype html>
<html>
<head>
<title>Bob</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" contents="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body {
height: 100%;
background-color:red;
margin:0 auto;
}
#wrapper {
width:600px;
height: 100%;
margin:0 auto;
background-color: white;
padding-top:8px;
padding-bottom:100%; /* removed and white space at bottom removed */
padding-left: 20px;
padding-right:20px;
}
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
1 个解决方案
解决方案1
0 已采纳 2015-07-29 00:15:03
The reason why there is scrolling is because you are setting the padding-bottom to 100%. 进行滚动的原因是因为您将padding-bottom设置为100％。 Paddings and margins are calculated using width as a reference and not the height : 填充和边距是使用width而不是height作为参考来计算的：
'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Percentages: refer to width of containing block
As per why if you remove the padding-bottom:100%; 按照为什么要删除padding-bottom:100%; , then #wrapper takes only a little bit instead of the whole screen (as you expect because you have height:100% ): the height is calculated based on the height of the containing block : ，那么#wrapper只需要一点点而不是整个屏幕（正如您所期望的那样，因为您拥有height:100% ）： 高度是根据包含块的高度来计算的 ：
'height'
<percentage>
Specifies a percentage height.
Right now you are setting the body to a height of 100%, but you are not setting the height of html anywhere. 现在，您将body设置为100％的高度，但没有在任何地方设置html的高度。 So the body is taking 100% of the height of the parent ( html ) that is nothing. 因此， body占据了父对象（ html ）的100％的高度，这没什么。 To fix that problem, just apply the same style to body and html : 要解决该问题，只需将相同的样式应用于body和html ：
html, body {
height: 100%;
background-color:red;
margin:0 auto;
}
So to achieve what you want: add html 's height, and remove the unnecessary padding-bottom . 因此，要实现您想要的目标：添加html的高度，并删除不必要的padding-bottom 。 Like this: 像这样：
<!doctype html> <html> <head> <title>Bob</title> <meta charset="utf-8" /> <meta http-equiv="Content-type" contents="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial scale=1" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <style> html,body { height: 100%; background-color:red; margin:0 auto; } #wrapper { width:300px; height: 100%; margin:0 auto; background-color: white; padding-top:8px; /*padding-bottom:100%; /* removed and white space at bottom removed */ padding-left: 20px; padding-right:20px; box- } </style> </head> <body> <div id="wrapper"></div> </body> </html>
There is still a small scroll because #wrapper has a padding-top:8px . 由于#wrapper具有padding-top:8px因此仍然有一个小的滚动padding-top:8px 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.