使用基于网格的设计的最大宽度和最小宽度的弹性布局 [英] Elastic layout with max-width and min-width using grid based design
问题描述
我想开发4列布局（除了mastead和footer，它占用页面的整个可用宽度），使最右边的列固定在200px，其他是流体受最小宽度= 960像素和最大-width = 1216px。
因此，这意味着只要浏览器窗口大于960和小于1216像素宽，布局就像液体布局一样。一旦浏览器窗口大于1216，它将作为固定布局与width = 1216px和页面中心在浏览器视口。如果浏览器窗口缩小到小于960像素，则会出现水平滚动条，因为最小宽度为960像素。
我喜欢开发网站布局的网格系统（例如 http：// 960.gs/ ）。
我的网页上的doctype将是<！DOCTYPE html> （aka html5 doctype）
解决方案应该适用于IE 6 7 8 9和FF，Safari，Chrome，Opera。
希望这说明我正在寻找什么。
根据上面给出的条件，这个问题的解决方案是什么？
我研究google但找不到任何解决方案。我遇到的解决方案，像3列的最大宽度，但没有网格系统，看起来太笨重。
后来我必须添加对小屏幕（移动设备）需要设置一些列来显示：none和通过使用媒体查询堆叠其他列，但首先我需要回到上面的问题。
我在IE7 / 8和最新版本的Chrome，Firefox，Opera，Safari中测试过。
这不会在IE6说）因为 min-width 和 max-width - 有大量的资源在线详细介绍。我不会花费努力这样做自己，除非我的代码的其余部分对你是正确的。此外，我对使用CSS网格系统没有兴趣。
（具有较高的右列）
现场演示 （带较高的流体 b
$ b
HTML ：
< div id = 。
< div id =header> header< / div>
< div id =fluidColumnContainer>
< div class =column>第1列< / div>
< div class =column>第2列< / div>
< div class =column>第3列< / div>
< / div>
< div id =fixedColumn>我是200像素宽！< br /> o< br /> o< br /> o< br /> o< / div>
< div id =footer> footer< / div>
< / div>
CSS：
html，body {
margin：0;
padding：0;
border：0
}
#container {
margin：0 auto;
min-width：960px;
max-width：1216px;
overflow：auto
}
#fluidColumnContainer {
padding：0 200px 0 0
}
#fixedColumn {
width：200px;
float：right
}
.column {
float：left;
width：33％
}
#header {
height：90px
}
#footer {
height：90px;
clear：both
}
I want to develop 4 column layout ( in addition to mastead and footer which takes the full available width of the page) such that right-most column is fixed at 200px and others are fluid subject to min-width = 960px and max-width= 1216px.
So this means as long as the browser window is greater than 960 and less than 1216 px wide, the layout acts like liquid layout. Once the browser window is larger than 1216, it acts as fixed layout with the width= 1216px and the page centered in the browser viewport. If the browser window is shrunk to less than 960px, horizontal scrollbar at bottom would appear because min-width is 960px.
I liked the grid system of developing website layout (example http://960.gs/).
The doctype on my webpage would be <!DOCTYPE html> (aka html5 doctype)
The solution should work for IE 6 7 8 9 and FF, Safari, Chrome, Opera.
Hopes this makes it clear what I am looking for.
What is the solution to this problem based on the conditions given above?
I researched google but could not find any solution. I come across solution like 3 column with max-width but without grid system and looked too clumsy.
Later I have to add support for small screen (Mobile devices) which would require setting some column to display:none and stacking other columns on top of each other by using media queries but first I need to get past above problem.
I tested this in IE7/8 and recent versions of Chrome, Firefox, Opera, Safari.
This will not work in IE6 (as @meagar said) because of min-width and max-width - there are plenty of resources online detailing hacks to get around this. I'm not going to expend effort on doing this myself unless the rest of my code is correct for you. Also, I have no interest in using a CSS grid system.
Live Demo (with taller right column)
Live Demo (with taller fluid column)
HTML:
<div id="container">
<div id="header">header</div>
<div id="fluidColumnContainer">
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
</div>
<div id="fixedColumn">i'm 200px wide!<br />o<br />o<br />o<br />o</div>
<div id="footer">footer</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
border: 0
}
#container {
margin: 0 auto;
min-width: 960px;
max-width: 1216px;
overflow: auto
}
#fluidColumnContainer {
padding: 0 200px 0 0
}
#fixedColumn {
width: 200px;
float: right
}
.column {
float: left;
width: 33%
}
#header {
height: 90px
}
#footer {
height: 90px;
clear: both
}
这篇关于使用基于网格的设计的最大宽度和最小宽度的弹性布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
