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;
}

您可以看到an example here。

Answer 4

在大量研究了这个问题之后，我得出的结论是，它不能以兼容的方式用css完成（我甚至不考虑IE6）。可能的解决方案涉及javascript或表。我选择了较小的邪恶（表格），因为javascript导致了一个更复杂的解决方案，处理onResize事件可能会对浏览器造成负担，具体取决于所调用函数的复杂程度。鉴于它是一个内部网应用程序，某些搜索引擎问题并不重要。唯一真正的问题是可访问性。

我很高兴被证明是错的：）

CSS布局液柱发布包装内容

4 个答案: