[英]CSS Layout liquid column issue wrapping content
+-----------------------------------------------------+ |.....................................................| |..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.......................| +-----------------------------------------------------+
I am trying to create a 2 column layout (sidebar + content area) with a header (and possibly a footer) where the sidebar has a fixed width and the content area is fluid. 我正在尝试创建带有标题(可能还有页脚)的2列布局(侧栏+内容区域),其中侧栏具有固定的宽度,内容区域是流畅的。 The difficulty is having the content area effectively wrap its contents so the content doesn't overflow.
困难在于使内容区域有效地包装其内容,以使内容不会溢出。
I'd like to know if there is a CSS way to do this and if not whats the best Javascript approach to it since I had some difficulties with cross-browser support. 我想知道是否有CSS方法可以做到这一点,如果没有,最好的Javascript方法是什么,因为我在跨浏览器支持方面遇到了一些困难。
Try this. 尝试这个。
#content {
margin-top: 128px;
maring-left: 140px;
}
#sidebar {
position: fixed;
left: 0;
top: 128px;
width: 140px;
}
CSS:
#element { word-wrap: break-word; }
This will do it for you: 这将为您做到:
HTML 的HTML
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
CSS 的CSS
#header {
height: 128px;
}
#sidebar {
float: left;
width: 140px;
}
#content {
margin-left: 140px;
}
You can see an example here . 您可以在此处查看示例 。
After having researched the matter substantially, I've concluded that it simply can't be done with css in a compatible way (and I'm not even considering IE6). 在对问题进行了实质性研究之后,我得出结论,使用兼容的CSS根本无法做到这一点(而且我什至没有考虑IE6)。 The possible solutions involve either javascript or tables.
可能的解决方案涉及javascript或表格。 I picked the lesser evil (tables) since javascript resulted in a more complicated solution and handling the onResize event can be taxing on the browser depending on the complexity of the function called.
我选择了较少的邪恶(表),因为javascript导致了更复杂的解决方案,而onResize事件的处理可能会给浏览器造成负担,具体取决于所调用函数的复杂性。 Certain search engine concerns are not important given it's an intranet application.
考虑到它是Intranet应用程序,因此某些搜索引擎问题并不重要。 The only real issue is accessibility.
唯一真正的问题是可访问性。
I'd be quite glad to be proven wrong though :) 我很高兴被证明是错误的:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.