CSS Layout液柱問題包裝內容

Question

+-----------------------------------------------------+
|.....................................................|
|..header height: 128px...............................|
|.....................................................|
+-----------------------------------------------------+
|.............|.......................................|
|.sidebar.....|..Lorem ipsum..........................|
|.width:......|.......................................|
|.140px.......|..+---------------------------------------------+
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..+---------------------------------------------+
|.............|.......................................|
|.............|.......................................|
|.............|.......................................|
|.............|..frame should be as large as the......|
|.............|..entire viewport or larger depending..|
|.............|..on the context.......................|
+-----------------------------------------------------+

我正在嘗試創建帶有標題（可能還有頁腳）的2列布局（側欄+內容區域），其中側欄具有固定的寬度，內容區域是流暢的。 困難在於使內容區域有效地包裝其內容，以使內容不會溢出。

我想知道是否有CSS方法可以做到這一點，如果沒有，最好的Javascript方法是什么，因為我在跨瀏覽器支持方面遇到了一些困難。

Answer 1

嘗試這個。

#content {
  margin-top: 128px;
  maring-left: 140px;
}
#sidebar {
  position: fixed;
  left: 0;
  top: 128px;
  width: 140px;
}

Answer 2

CSS：

#element { word-wrap: break-word; }

Answer 3

這將為您做到：

的HTML

<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>

的CSS

#header {
   height: 128px;
}

#sidebar {
   float: left;
   width: 140px;
}

#content {
   margin-left: 140px;
}

您可以在此處查看示例 。

Answer 4

在對問題進行了實質性研究之后，我得出結論，使用兼容的CSS根本無法做到這一點（而且我什至沒有考慮IE6）。 可能的解決方案涉及javascript或表格。 我選擇了較少的邪惡（表），因為javascript導致了更復雜的解決方案，而onResize事件的處理可能會給瀏覽器造成負擔，具體取決於所調用函數的復雜性。 考慮到它是Intranet應用程序，因此某些搜索引擎問題並不重要。 唯一真正的問題是可訪問性。

我很高興被證明是錯誤的:)