问题描述
我试图构建一个包含以下内容的布局元素:
$ b $ 1)标题区域
2)页脚区域
3)左窗格
4)内容区域
我已经拿出了下面的CSS,但我不认为这是做我所需要的最好的方式。
请在下面找到我正在寻找的图片以及所有细节。此外,以下是我目前的CSS和html。
CSS:
* {
margin:0;
}
html,body {
height:100%;
overflow:hidden;
}
#wrapper {
最小高度:100%;
height:auto!important;
身高:100%;
margin:0 auto -100px;
}
#leftbar {
float:left;
width:350px;
背景色:#EAEAEA;
身高:100%;
位置:绝对;
z-index:-1;
}
#rightbar {
}
#footer {
height:100px;
}
#header {
height:100px;
}
HTML:
< div id =wrapper>
< div id =header> < / DIV>
< div id =content>
< div id =leftbar> < / DIV>
< div id =rightbar> < / DIV>
< / div>
< / div>
< div id =footer> < / DIV>
所需布局:
任何帮助将不胜感激。
谢谢!
是否符合你的要求?我无法确定您是否希望页脚始终位于页面的底部。
更新
有页脚总是在最下面。
I'm having a bit of trouble with some CSS, and am seeking some help from this wonderful community.
I am trying to build a layout containing the following elements:
1) A header area2) A footer area3) A left hand pane4) A content area
I have come up with the following CSS, but I do not believe this is the best way of doing what I need.
Please find below an image of what I am looking for, with all the details. Additionally, below is my current CSS and html.
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#leftbar {
float: left;
width: 350px;
background-color: #EAEAEA;
height: 100%;
position: absolute;
z-index: -1;
}
#rightbar {
}
#footer {
height: 100px;
}
#header {
height: 100px;
}
HTML:
<div id="wrapper">
<div id="header"> </div>
<div id="content">
<div id="leftbar"> </div>
<div id="rightbar"> </div>
</div>
</div>
<div id="footer"> </div>
Desired layout:
Please note that although I don't mind using jQuery and javascript to accomplish this, I'd like to avoid it.
Any help will be greatly appreciated.
Thanks!
Does this fiddle meet your requirements? I couldn't quite tell whether you wanted the footer to always be at the bottom of the page or not.
Update
This fiddle has the footer always at the bottom.
这篇关于使用具有固定页眉和页脚的CSS来变量内容div高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!