溢出：隐藏的股利和身体，不同的行为

鉴于这个网站：溢出：隐藏的股利和身体，不同的行为

<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%; 
}

所以#b是100％的高度，这意味着它正在取其父容器块的高度，即500px，问题在于overflow: hidden;似乎不起作用，#b未被剪切。

在另一方面，如果我具有相同属性包#a和#b与另一DIV如body上述我所期望的结果：

#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问题：

的jsfiddle与身体标记的包装：http://jsfiddle.net/3AMtG/

的jsfiddle用div标签的包装：http://jsfiddle.net/2QWn3/具有相同属性

两个jsFiddles产生不同结果。这是为什么？

来源

2013-03-17 Twissell

我看不出你的两个实例有什么区别，这也许是重点，我猜一个body标签比div标签更具基本价值，每个浏览器都有自己的渲染方式等等@Firefox 19.0.2 – 2013-03-17 15:01:54

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

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

如果设置overflow比visible上html其他的东西，不过，这会导致将视使用给html而不是body，从而留下宣言body不受影响，并允许它的行为方式相同的价值包装：

html { 
    overflow: auto; 
} 

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

jsFiddle preview

来源

2013-03-17 15:02:27 BoltClock

体和DIV有完全不同的人。在我的日常工作中，我喜欢像这样构建代码。

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

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

来源

2013-03-17 15:03:03

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

来源

2013-03-17 15:44:05

溢出：隐藏的股利和身体，不同的行为

回答

相关问题