6

鉴于此html：

<body>
  <div id="a"></div>
  <div id="b"></div>
</body>

我想#b填充其容器块的所有剩余垂直空间，我从这个开始：

body {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

#a {
  height: 100px;
  width: 100px;
}

#b {
  height: 100%;
  width: 100%;
}

100% 高度也是如此#b，这意味着它正在采用其父容器块的高度，即500px，问题是overflow: hidden;似乎不起作用，#b没有被剪裁。

另一方面，如果我用另一个具有与上述相同属性的 div 进行包装#a，我将得到所需的结果：#bbody

#wrap {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

#a {
  height: 100px;
  width: 100px;
}

#b {
  height: 100%;
  width: 100%;
}

当然用这个html：

<body>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
</div>
</body>

我的问题是为什么div并且body似乎具有相同属性的不同行为？有没有办法在没有包装的情况下获得相同的效果？

为了说明这个问题，我创建了两个 jsFiddles：

带有body标签的jsFiddle作为包装器：http: //jsfiddle.net/3AMtG/

带有 div 标签作为包装器的 jsFiddle：http: //jsfiddle.net/2QWn3/

两个具有相同属性的 jsFiddle 会产生不同的结果。这是为什么？

4

3 回答 3

8

该overflow属性具有特定于 HTMLhtml和body元素的某些特殊行为，这些行为在CSS2.1 规范中进行了描述。这些特殊情况是为了适应在正常情况下更改整个页面上的溢出设置，因此作者只需将其设置为html或body，但不能同时设置。

在这种情况下，当您应用于overflow: hidden时body，它实际上会影响视口而不是body（您可以通过调整预览窗格的大小使其更短来看到这一点——预览窗格本身不会出现滚动条）。#b即使你给它一个小于和之#a和的固定高度，这也会导致身体正常溢出#b。换句话说，就好像你从来没有把它放在身体上一样。

但是，如果您设置为onoverflow以外的其他值，这会导致视口使用给定的值而不是，从而使声明不受影响并允许其行为方式与包装器相同：visiblehtmlhtmlbodybody

html {
  overflow: auto;
}

body {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

jsFiddle 预览

于 2013-03-17T15:02:27.170 回答
0

body 和 div 完全不同。在我的日常工作中，我喜欢这样构建我的代码。

<div class='xxx-ctn'>
  <div class='xxx-inner'>
    <div class='data-wrapper'>
      [p|ul|ol|h1-h6|article|section].....
    </div>
  </div>
</div>

好吧，我想念你的创立，但我认为这是一个很好的编码习惯。

于 2013-03-17T15:03:03.347 回答
0

body 元素被认为是主要的父元素，在浏览器窗口中显示的其他元素驻留在其中，因此 width 和 height 属性不适用于它。根据最佳实践，最好创建一个 div 容器，如您在第二个示例中所做的 #wrapper。

于 2013-03-17T15:44:05.903 回答