div内的文本没有接收到div的边距或填充

时间：2014-10-02 02:40:20

标签： html css margin

这是我的HTML：

<html>
    <body>
        <div id='content'>
            hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi<br />hi
        </div>
    </body>
</html>

这是我的CSS：

html, body, #content {
    width: 100px;
    height: 100%;
}

body {
    background-color: red;
}

#content {
    border: 1px solid black;
    margin-bottom: 100px;
    padding-bottom: 100px;
}

现在，为什么我的内容div不会一直到页面底部，为什么100px的余量如何使内容中的单词从屏幕底部变为100px？

小提琴：http://jsfiddle.net/npwp0nr2/2/

编辑：内容的高度应占据整个屏幕。

4 个答案:

答案 0 :(得分：1)

高度不会影响百分比值。元素的高度由其内容的高度或显式值决定。通常，应避免在元素（特别是用作容器的元素）上设置高度，并且身体和HTML标签不需要它。完全删除第一个规则，并给内容div 100px宽度规则，它实现了我认为你之后的目标。

body {
  background-color: red;
}
#content {
  width: 100px;
  border: 1px solid black;
  margin-bottom: 100px;
  padding-bottom: 100px;
}

Fiddle

答案 1 :(得分：1)

解释

让我们看看这里发生了什么：

  • margin-bottom: 100px在外面<{em>

    • 下面的#content下面创建了一个空白

  • padding-bottom: 100px在 #content内创建了一个间隙

  • height: 100%给出一个固定高度，该高度是根据渲染页面时视口的高度确定的

如果您在overflow: auto上设置#content，则会更加明显。 ＆＃34;显示代码段＆＃34;并运行下面的代码片段：

  • 将#content div滚动到底部，您可以看到底部填充创建了一个间隙。

  • 底部边距是内容边框下方的间隙

＆＃13;
＆＃13; 
html,
body,
#content {
  width: 100px;
  height: 100%;
}
body {
  background-color: red;
  margin: 0;
}
#content {
  border: 1px solid black;
  margin-bottom: 100px;
  padding-bottom: 100px;
  overflow: auto;
}
＆＃13; 
<body>
  <div id='content'>
    hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
    <br />hi
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

所以这解释了你当前的行为，但是......

如何将div拉伸到底部？

要将内容div拉伸到视口底部而不考虑内容：

  • * { box-sizing: border-box; }将填充和边框合并到高度计算中

  • html,body { height: 100%; }允许body元素的子元素具有百分比高度属性

  • #content获得 min-height 100％，这将拉伸

  • 使用margin: 0删除正文上的默认边距（如果需要，可以使用填充替换）

CSS / HTML / Demo

＆＃13;
＆＃13; 
* {
    box-sizing: border-box;
}
html, body {
    width: 100px;
    height: 100%;
}
body {
    background-color: red;
    margin: 0;
}
#content {
    border: 5px solid black;
    min-height: 100%;
    width: 100px;
}
＆＃13; 
<div id="content"></div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

height:100%在CSS中没有任何用处。你必须给它一个确定的高度或只是让内容导致高度增加。取出height:100%。

答案 3 :(得分：0)

我猜您希望内容div填充整个页面高度并应用100px的填充？

很抱歉，但在同一个div中，浏览器不会区分和切断内容，因为您无法添加负填充，它只会继续展开页面。为了说明我改变了你的小提琴http://jsfiddle.net/npwp0nr2/4/

尝试在css中取消注释height:100%;行，看看会发生什么。你会发现它会将div扩展到100％的高度，但你又不能使用负填充。

相关问题
最新问题