Html CSS 布局 2 列固定流体
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/580195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Layout 2-Column fixed-fluid
提问by Newbie
I was wondering if anyone here had a fairly simple tutorial for the following 2 column css layout. A left fixed column and a fluid content column, with a header and footer and equal column heights.
我想知道这里是否有人对以下 2 列 css 布局有一个相当简单的教程。左侧固定列和流动内容列,具有页眉和页脚以及相等的列高。
采纳答案by chaos
Try this Dynamic Drive layoutand its relatives (that I was pointed to via a similar question of mine).
试试这个动态驱动器布局和它的亲戚(我是通过一个类似的问题指出的)。
回答by sdw3489
There is actually an even easier solution to this which i discovered not too long ago. Works well back to IE7. The #fluid div will slide up next to the fixed fix and take up the remaining space while maintaining great fluidity for all responsive sites.
实际上,我不久前发现了一个更简单的解决方案。工作良好回 IE7。#fluid div 将在固定修复旁边向上滑动并占用剩余空间,同时为所有响应站点保持良好的流动性。
#fixed{
width:150px;
float:left;
}
#fluid{
overflow:hidden;
}
回答by TallGreenTree
The one I use is the faux-column layout hack, which includes no scripting.
我使用的一种是仿列布局技巧,它不包括脚本。
Here's a tutorial that seems to be a simple explaination of the concept: dustinbrewer.com
这是一个教程,似乎是对该概念的简单解释: dustinbrewer.com
Here's the original alistapart.com article that I learned from: alistapart.com
这是我从alistapart.com上学到的原始文章:alistapart.com
Good luck!
祝你好运!