CSS布局液柱问题包装内容

 
+-----------------------------------------------------+ 
|.....................................................| 
|..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布局液柱问题包装内容

我想知道是否有一种CSS方式来做到这一点，如果不是最好的Javascript方法是什么，因为我有一些跨浏览器支持的困难。

来源

2010-09-17 SynBiotik

是您的ASCII绘图试图描绘期望的结果，或者是“xxxx'面积断其容器的出你想的问题修理？ – 2010-09-17 11:38:48

它可能也很好显示一些实际的代码/内容，所以我们确切地知道问题是什么。 – 2010-09-17 11:39:28

ASCII是破坏容器的div（不应该发生的）。 – SynBiotik 2010-09-17 12:58:53

试试这个。

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

来源

2010-09-17 11:39:12 jcubic

位置：fixed在IE <7中不起作用 - 加上你真的不需要这个布局，因为float会比在正确的位置放置该侧边栏的能力更大 – Alex 2010-09-17 11:43:32

CSS：

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

来源

2010-09-17 11:42:10 Alex

这会为你做它：

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。

来源

2010-09-17 13:04:05 Pat

This CSS与我使用的相似，因此会导致问题。 – SynBiotik 2010-09-17 14:33:16

什么是转义'＃content'元素的HTML/CSS？上面的CSS在我的几个项目上工作得很好，所以你的转义元素必须有一些独特的东西。 – Pat 2010-09-17 15:48:15

任何宽度大于可用宽度的块元素，考虑#content是浏览器的宽度...... – SynBiotik 2010-09-17 16:35:28

在对此事进行了大量研究之后，我断定它不能以兼容的方式用css完成（而且我甚至没有考虑过IE6）。可能的解决方案涉及JavaScript或表格。由于javascript导致了一个更复杂的解决方案，并且处理onResize事件可能会对浏览器产生影响，这取决于所调用函数的复杂性，所以我选择了较小的邪恶（表格）。某些搜索引擎的担忧并不重要，因为它是Intranet应用程序。唯一真正的问题是可访问性。

我会很高兴，虽然被证明错了:)

来源

2010-09-21 15:36:52 SynBiotik

CSS布局液柱问题包装内容

回答

相关问题