HTML/CSS：爲什麼身體不能伸展到其內容？

藉此簡單的例子和打開：HTML/CSS：爲什麼身體不能伸展到其內容？

<html> 
    <body style="background-image:url(http://upload.wikimedia.org/wikipedia/commons/2/21/Mandel_zoom_00_mandelbrot_set.jpg);background-repeat: no-repeat; background-position: top center;"> 
     <div style="width: 8000px; border: 3px solid red;">Demo</div> 
    </body> 
</html>

的頁面是由使得主體具有頂爲中心的背景圖象和溢出窗口邊界上，所以有水平滾動（如果有一個容納元件顯示器寬度超過8000像素，那麼你真的很酷，請將窗口縮小並刷新）。

問題是由於某種原因，<body>不能拉伸以包含<div>。它只是保持與視口相同的寬度，並且<div>會溢出。這反過來導致背景居中在錯誤的地方並將其裁剪到視口的大小。當你向右滾動時很難看。

我已經找到了解決這個問題的方法，但是我想知道爲什麼這樣呢？它在瀏覽器中似乎也是一致的。但在我看來，這是非常直觀的，基本上很簡單錯誤。容器元素應該足夠大以容納它的孩子 - 除非它們完全被定位，在這種情況下它們不參與佈局計算。

來源

2010-01-29 Vilx-

嘿。回到這2年後，我正在尋找你說你找到的同樣的解決方案。 Bobince的答案並沒有幫助，非常多..（浮動唯一的選擇？） – SoreThumb 2012-08-29 04:04:21

我仍然使用浮動。看看這裏：http://www.drowtales.com – 2012-08-29 11:24:25

塊根本不會水平伸展以容納其子內容; （1）這是隻發生在縱軸上的事情。（2）從邏輯上講，兩個維度都不能有彈性;必須修正（父母）。在CSS中，正常流程中的塊元素的寬度僅從父元素（減去填充，邊距，邊框）派生，然後高度繼續從中，看看您可以在塊的寬度中填充多少內容並使其流動。

背景圖像可以出現在誤導你什麼是真正發生的事情，因爲this quirk CSS的一個令人困惑的地方：

對於文檔根元素是一個HTML「HTML」元素或XHTML「HTML 「元素爲'background-color'計算'transparent'的值，'background-image'則計算'none'，但用戶代理必須使用該元素的第一個HTML」BODY「元素或XHTML中的背景屬性的計算值當爲畫布繪製背景時，「body」元素的子元素，並且不能繪製該子元素的背景。這些背景也必須與它們僅用於根元素時相同的點上。

這是一個討厭的黑客到位，因爲人們習慣上把「身體」的背景和有它填充視口，即使<body>元素本身並不代表口中。

（1）除少數特殊情況外，如float和position: absolute元素沒有聲明width。

（2）除非您故意通過設置height/overflow來停止該操作。

來源

2010-01-29 11:11:54 bobince

我打算寫完全相同的答案，但沒有CSS規範的引用。 +1 – Boldewyn 2010-01-29 11:14:27

展開的例外是視口。除非它的直接或附加內容需要它，否則沒有擴展視口 - 這包括div和表格元素（例如，身體上的display: table-cell） - 但不是塊容器。

來源

2010-01-29 11:05:49 Anonymous

HTML/CSS：爲什麼身體不能伸展到其內容？

回答

相關問題