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应用程序，因此某些搜索引擎问题并不重要。 唯一真正的问题是可访问性。

我很高兴被证明是错误的:)