CSS布局与源顺序内容 [英] CSS layout with Source ordered Content
问题描述
开始怀疑我是否缺少明显的东西，但我一直在寻找几天，仍然找不到一个确定的答案。
Beginning to wonder if I am missing something obvious but I have been searching for days now and still haven't been able to find a definitive answer.
我正在寻找一个源订单内容CSS布局为两列页面（菜单到右）与标题和粘性页脚，最好没有讨厌的黑客。首选源顺序：
{content}
{rightmenu}
{footer}
{header}
What I am looking for is a Source ordered Content CSS layout for a two column page (menu to right) with header and sticky footer, and preferably no nasty hacks. Preferable Source order of:
{content}
{rightmenu}
{footer}
{header}
像我说的，我没有太多尝试为自己构建这个，也没有能够找到一个合适的例子在任何地方。任何建议？
Like I say I'm not getting too far in trying to build this for myself, nor have I been able to find a suitable example anywhere. Any suggestions?
感谢
推荐答案
想起来了。位的相对和绝对定位的混合，但似乎工作。任何人都可以看到此问题。
This is the best I can come up with at the moment. Bit of a mixture of relative and absolute positioning but seems to work. Can anyone see any problems with this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.container {
min-height: 100%;
/*height: auto !important;*/
height: 100%;
margin: 0 auto -2em;
}
.content{
float: left;
width: 80%;
}
.menu{
margin-left: 80%;
}
.header{
position: absolute;
top: 0px;
height: 3em;
width: 100%;
}
.clearheader{
height: 3em;
}
.footer, .clearfooter {
height: 2em;
clear: both;
}
.container {
background: grey;
}
.header{
background: cyan;
}
.clearheader{
background: cyan;
}
.footer{
background: blue;
}
.clearfooter {
background: lightblue;
}
</style>
<link rel="stylesheet" href="NJC layout2.css" ... />
</head>
<body>
<div class="container">
<div class="clearheader"></div>
<div class="content">Content</div>
<div class="menu">menu</div>
<div class="clearfooter"></div>
</div>
<div class="header">header</div>
<div class="footer">Footer</div>
</body>
</html>
这篇关于CSS布局与源顺序内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
