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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:18:56  来源:igfitidea点击:

CSS Layout 2-Column fixed-fluid

htmlcsslayout

提问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 将在固定修复旁边向上滑动并占用剩余空间,同时为所有响应站点保持良好的流动性。

http://jsfiddle.net/uEj55/1/

http://jsfiddle.net/uEj55/1/

#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!

祝你好运!