Javascript CSS布局液柱问题包装内容 +-----------------------------------------------------+ |.....................................................| |收割台高度：128px| |.....................................................| +-----------------------------------------------------+ |.............|.......................................| |.侧边栏| |.宽度：…|| |.140px……|+---------------------------------------------+ |XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX| |XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX| |XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX| |XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX| |.............|..+---------------------------------------------+ |.............|.......................................| |.............|.......................................| |.............|.......................................| |框架应与……一样大| |整个视口或更大的视情况而定| |关于上下文| +-----------------------------------------------------+

我正在尝试创建一个2列布局（边栏+内容区域），其中有一个页眉（可能还有一个页脚），边栏有一个固定的宽度，内容区域是流动的。 难点在于让内容区域有效地包装其内容，这样内容就不会溢出

我想知道是否有CSS方法可以做到这一点，如果没有，最好的Javascript方法是什么，因为我在跨浏览器支持方面遇到了一些困难。

试试这个

+-----------------------------------------------------+ |.....................................................| |..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.......................| +-----------------------------------------------------+ CSS:

---

这将为您做到这一点：

HTML

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

---

你可以看到。

在对这一问题进行了大量研究之后，我得出结论，css无法以兼容的方式实现这一点（我甚至没有考虑IE6）。可能的解决方案涉及javascript或表。 我选择了较小的缺点（表），因为javascript导致了一个更复杂的解决方案，根据调用的函数的复杂性，处理onResize事件可能会对浏览器造成负担。 考虑到搜索引擎是一个内部网应用程序，某些搜索引擎问题并不重要。 唯一真正的问题是可访问性

---

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

您的ASCII绘图是试图描述期望的结果，还是“xxxx”-区域从其容器中断裂是您试图解决的问题？显示一些实际的代码/内容也可能很好，这样我们就可以确切地知道问题所在。ASCII是破坏容器的div（什么不应该发生）.position:fixed在IE<7中不起作用-另外，对于这个布局，你真的不需要它，因为float能够将侧边栏定位在正确的位置。这个css与我使用的css类似，因此会导致问题。逃避

内容的元素的HTML/css是什么对于我来说，在几个项目中，转义元素肯定有一些独特之处。任何宽度大于可用宽度的块元素，考虑到#内容是浏览器范围的……不幸的是，包含这样一个元素的唯一方法是在
#内容
容器上设置一个最小宽度，以确保它始终是可用的宽到足以包含其大的块级元素。我得出了相同的结论，现在我正在尝试一个javascript解决方案。将发布进度。
#element { word-wrap: break-word; }

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

#header {
   height: 128px;
}

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

#content {
   margin-left: 140px;
}