溢出：隱藏的股利和身體，不同的行爲

鑑於這個網站：溢出：隱藏的股利和身體，不同的行爲

<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

溢出：隱藏的股利和身體，不同的行爲

回答

相關問題