3和2列全屏（width& height）布局（CSS） [英] 3 and 2 column full screen (width & height) layouts (CSS)
问题描述
我想知道是否有任何简单的例子。
*右和左固定柱有流体中心。
具有完整的高度和宽度以及页眉和页脚。
*带有流体内容列的单个左固定列2.
具有完整的高度和宽度以及页眉和页脚。
*带有流体内容列的单一右固定柱。
具有完全的高度和宽度以及页眉和页脚。
我已经尝试过一些方法（如listapart上列出的方法），但它们似乎很复杂，并且使用了很多div，
提前感谢
p>您在alistapart.com中发现的示例与其需要的一样复杂，您可以找到的有关这些布局的每个严重示例都支持填充。你会发现（和已经找到）在互联网上很多很好的例子，只是花了一些时间来理解他们，你会看到他们不那么复杂，到底。
无论如何，我有一个很好的演示布局类似于你正在寻找的第二个，这里：
http://www.meiaweb.com/test/BMS_DM_NI/
基本上，html就是这样：
< body>
< div id =head>
< h1>标题< / h1>
< / div>
< div id =main>
< div id =navigation>
<！ - 导航内容 - >
< / div>
< div id =content>
< h2>内容标题< / h2>
< p>
<！ - main content here - >
< / p>
< / div>
< / div>
< / body>
而css是：
html {
overflow：auto;
height：100％;
}
body {
margin：0;
padding：0;
font-family：Verdana，Geneva，Arial，Helvetica，sans-serif;
width：100％;
height：100％;
line-height：1.5em;
}
#head {
height：20px;
background-color：＃666;
color：#AAA;
padding：20px 20px;
}
#navigation {
width：210px;
padding：20px 20px;
background：#efefef;
border：none;
border-right：solid 1px #AAA;
float：left; $ b $b overflow：auto;
}
#content {
margin-left：250px;
padding：20px 20px;
}
我认为这很简单，它适用于所有现代浏览器。 p>
I was wondering if there were any simple examples that did the following
* A right and a left fixed column with a fluid center.
With full height and width and a header and footer.
* A single left fixed column with a fluid content column 2.
With full height and width and a header and footer.
* A single right fixed column with a fluid content column.
With Full height and width and a header and footer.
I've tried some methods (such as the ones listed on listapart) but they seemed really complicated and they used a lot of divs, or they just didn't support padding.
Thanks in advance
The examples you found in alistapart.com are as complicated as they need to be, and every serious example that you can find about those layouts supports padding. You will find (and already found) a lot of good examples about it in the internet, just spend some time trying to understand them and you will see that they are not so complicated, in the end.
Anyway, I have a good demo layout similar to the second you are looking for, here: http://www.meiaweb.com/test/BMS_DM_NI/
Basically, the html is this:
<body>
<div id="head">
<h1>Title</h1>
</div>
<div id="main">
<div id="navigation">
<!-- navigation content -->
</div>
<div id="content">
<h2>Content Title</h2>
<p>
<!-- main content here -->
</p>
</div>
</div>
</body>
And the css is:
html {
overflow: auto;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
line-height: 1.5em;
}
#head {
height: 20px;
background-color: #666;
color: #AAA;
padding: 20px 20px;
}
#navigation {
width: 210px;
padding: 20px 20px;
background: #efefef;
border: none;
border-right: solid 1px #AAA;
float: left;
overflow: auto;
}
#content {
margin-left: 250px;
padding: 20px 20px;
}
I think it's simple enough, and it works in all modern browsers.
这篇关于3和2列全屏（width& height）布局（CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
