CSS底部多余的空格

Question

内容：我正在制作一个网站，其中中间的白色部分（“包装” div）应该是页面上所有内容的背景，而红色的部分（“ body”）则是两侧的内容作为边界。 如果我摆脱了“包装器” div的100％底部填充，则我在网站上拥有的内容将以红色背景（“主体”而不是“包装器”的背景）结束。 不过，如果我在'wrapper'div上有100％的底部填充，则可以滚动到比页面底部更深的位置（目前，我所有的内容都适合一页，而我可以滚动至少两页）。

请相应地说明如何在不使滚动能力超出内容结尾的情况下如何将内容的背景保留为wrapper div。 例如，在显示的代码中，由于没有内容，因此不能向下滚动到第一个屏幕之外。 我可以在显示的代码上滚动的数量与我在网站上可以滚动的数量相同。

<!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>

Answer 1

进行滚动的原因是因为您将padding-bottom设置为100％。 填充和边距是使用width而不是height作为参考来计算的：

'padding-top'，'padding-right'，'padding-bottom'，'padding-left'

百分比：指包含块的宽度

按照为什么要删除padding-bottom:100%; ，那么#wrapper只需要一点点而不是整个屏幕（正如您所期望的那样，因为您拥有height:100% ）：高度是根据包含块的高度来计算的：

'高度'

<百分比>

指定百分比高度。 相对于生成的盒子的包含块的高度计算百分比。

现在，您将body设置为100％的高度，但没有在任何地方设置html的高度。 因此， body占据了父对象（ html ）的100％的高度，这没什么。 要解决该问题，只需将相同的样式应用于body和html ：

html, body {
    height: 100%;
    background-color:red;
    margin:0 auto;
}

因此，要实现您想要的目标：添加html的高度，并删除不必要的padding-bottom 。 像这样：

 <!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>

由于#wrapper具有padding-top:8px因此仍然有一个小的滚动padding-top:8px 。

CSS底部多余的空格

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-07-29 00:15:03

CSS底部多余的空格

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-07-29 00:15:03

解决方案1
0 已采纳 2015-07-29 00:15:03