如何將DIV縮放爲全寬？

我想將DIV設置爲100％的頁面寬度，而不是100％的窗口寬度。因此，如果我的內容比瀏覽器窗口更寬，我希望DIV仍然可以縮放到全部寬度，而不是像在width: 100%那樣在頁面中間結束。如何將DIV縮放爲全寬？

嵌套它與width: 200%; overflow: visible;一個DIV基本工作原理，但有副作用，你可以沿着所有的200％滾動。即使如此，如果內容超過窗口寬度的兩倍，div將在半空中結束。

例子：http://jsfiddle.net/nm64V/（請注意，3000px範圍的內容僅僅是一個例子，在我的項目，我不知道的內容將有多寬是，當它會超過窗口寬度）

我如何實現描述行爲？

來源

2011-10-25 Cobra_Fast

請問您的HTML和車身造型的寬度設置爲100％呢？這個特定的DIV嵌套到另一個標籤（我的意思是BODY標籤除外）嗎？您可能會忘記'display：...'和'position：...'屬性以使您的DIV正常工作。 – bigp

它嵌套在一個總體包裝DIV中，它具有'margin：0'而沒有別的。這個包裝上面的下一個元素是BODY。 –

我不相信你想做的事是可能這樣。你可能需要給出一個更具體的例子來說明你想達到的目標。

在此之前，我會給出一個猜測可能的工作：給予周圍的元素（<body>可能工作，否則添加一個）display: table-cell，因爲表格單元拉伸以適應其內容。如果您需要支持不支持display: table-cell的舊版瀏覽器，請嘗試在內容周圍添加單個單元格表格。

例子：http://jsfiddle.net/nm64V/2/

來源

2011-10-25 12:58:59 RoToRa

你或許應該提供你試圖精確地做一個例子。由於DIV是一個塊元素，它應該始終使用所有可用的寬度，除非它是空的或浮動的。

是在頁面中的「內容」你在談論中提到DIV或別的地方？

來源

2011-10-25 12:30:16 Leo

爲我的問題添加了一個示例。 –

據我瞭解，你可以通過包裝在一個div集合中的所有內容到內容的大小，解決這個問題。使用你的例子：

<div style="margin: 0"> 
    <div style="width: 3000px;"> 
     <div style="width: 100%; border: 1px solid red;"></div> 
     <div>... Your long content goes here ...</div> 
    </div> 
</div>

現在，無論寬度設置的容器股利（比如，1500px），內格（有紅色邊框），你的內容將是寬度，即使它延伸超越瀏覽器窗口。

在你不知道的div容器將是什麼規模的情況下，取出「的風格=‘寬度：3000px;’」行，它仍然可以工作。

例子：http://jsfiddle.net/nm64V/1/

來源

2011-10-25 12:58:19 Anthony

如何將DIV縮放爲全寬？

回答

相關問題