使用具有固定页眉和页脚的CSS来变量内容div高度 [英] Variable content div height using css with fixed header and footer

问题描述

我试图构建一个包含以下内容的布局元素：
$ 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 area 2) A footer area 3) A left hand pane 4) 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高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！