高度页 - Div结构 [英] Height page - Div structure

问题描述

我想让我的网页占据屏幕的100％，页脚需要始终在页面底部。

我现在的错误是：
- 页脚停留在底部屏幕不是页面。
- div（menu）大于div（content）
- div没有正确调整大小

p>

Div结构

 < div id =container>< br /> 
< div id =header> CMS< / div> 
 
< div id =menu><？php include（'includes / menu.php'）;？>< / div> 
< div id =content> 
<？php include $ include_page？> 
< / div> 
 
< div id =footer> CMS< / div> 
< / div> 
  

CSS

  body {
 height：100％; 
 color：＃0b0b0b; 
 background-color：＃696060; 
 margin：0px; 
 padding：0px; 
 font-family：Tahoma，sans-serif; 
 font-size：12.5px; 
} 
 
 #container {
 margin-left：auto; 
 margin-right：auto; 
 width：1000px; 
 background-color：＃f1f1f1; 
 border-left：1px solid＃8f8f8f; 
 border-right：1px solid＃8f8f8f; 
 height：100％; 
} 
 #header {
 height：100px; 
 width：100％; 
 background-color：＃a31f00; 
 color：#fcfcfc; 
 text-align：center; 
} 
 #menu {
 width：210px; 
 background-color：＃e0e0e0; 
 float：left; 
 padding：10px 10px 10px 10px; 
 height：100％; 
} 
 #content {
 width：750px; 
 height：100％; 
 float：left; 
 padding：10px 10px 10px 10px; 
} 
 #footer {
 position：absolute; 
 bottom：0; 
 width：1000px; 
 height：20px; 
 background-color：＃a31f00; 
 color：#fcfcfc; 
 text-align：center; 
 font-size：11px; 
} 
  

解决方案

粘性页脚。当没有足够的内容推下它时，粘性页脚粘在页面的底部，但是当内容开始溢出页面时，页面就会随之而来。

为了创建一个，你基本上想要在< div> 标签中包装不是页脚的所有内容，例如：

 < div id =wrap> 
< div id =header> 
 ... 
< / div> 
 
< div id =main> 
<！ - 所有的页面内容都在这里 - > 
< / div> 
< / div> 
 
< div id =footer> 
我是一个页脚。 
< / div> 
  

现在，对于神奇的CSS：

  html，body 
 {
 height：100％; 
} 
 
 #wrap 
 {
 min-height：100％; 
} 
 
 #main 
 {
 overflow：auto; 
 padding-bottom：150px; / *必须与页脚的高度相同* / 
} 
 
 #footer 
 {
 position：relative; 
 margin-top：-150px; / *页脚高度的负值* / 
 height：150px; 
 clear：both; 
} 
 
 / * Opera Fix * / 
 body：before 
 {
 content：; 
 height：100％; 
 float：left; 
 width：0; 
 margin-top：-32767px; / 
} 
  

页面你将需要这种条件样式为IE6和更早版本和IE8（！IE7 意味着不是7，但所有其他）：

 < head> 
 ... 
<！ -  [if！IE 7]> 
< style type =text / css> 
 #wrap 
 {
 display：table; 
 height：100％; 
} 
< / style> 
<！[endif]  - > 
 ... 
< / head> 
  

I'm trying to get my page to occupy 100% of the screen, with a footer, which needs to always be on the bottom of the page.

The div's should expand when the page resizes, with the right background color.

The bugs I have at the moment are : - Footer stays at bottom of the screen not of the page. - div (menu) is bigger than the div (content) - the div doesn't resize properly

Here's my code:

Div stucture

<div id="container"><br />
   <div id="header">CMS</div>

   <div id="menu"><?php include ('includes/menu.php');?></div>
   <div id="content">
      <?php include $include_page?>
   </div>

   <div id="footer">CMS</div>
</div>

CSS

body {
    height: 100%;
    color: #0b0b0b;
    background-color: #696060;
    margin: 0px;
    padding: 0px;
    font-family: Tahoma, sans-serif;
    font-size: 12.5px;  
}

#container {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    background-color: #f1f1f1;
    border-left: 1px solid #8f8f8f;
    border-right: 1px solid #8f8f8f;
    height: 100%;
}
#header {
    height: 100px;
    width: 100%;
    background-color: #a31f00;
    color: #fcfcfc;
    text-align: center;
}
#menu {
    width: 210px;
    background-color: #e0e0e0;
    float: left;
    padding: 10px 10px 10px 10px;
    height: 100%;
}
#content {
    width: 750px;
    height: 100%;
    float: left;    
    padding: 10px 10px 10px 10px;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 1000px;
    height: 20px;
    background-color: #a31f00;
    color: #fcfcfc;
    text-align: center;
    font-size: 11px;
}

解决方案

You might be thinking about a sticky footer. A sticky footer sticks to the bottom of the page when there isn't enough content to push it down, but when the content starts overflowing the page, it goes along with it.

To make one, you basically want to wrap everything which is not the footer within a <div> tag, like so:

<div id="wrap">
  <div id="header">
    ...
  </div>

  <div id="main">
    <!-- All you page content goes here -->
  </div>
</div>

<div id="footer">
  I am a footer.
</div>

Now, for the magic CSS:

html, body
{
  height: 100%;
}

#wrap
{
  min-height: 100%;
}

#main
{
  overflow: auto;
    padding-bottom: 150px; /* must be same height as the footer */
}  

#footer
{
  position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear: both;
} 

/* Opera Fix */
body:before
{
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;/
}

And on your HTML page you will need this conditional style for IE6 and earlier and for IE8 (!IE7 means not 7, but all others):

<head>
  ...
  <!--[if !IE 7]>
  <style type="text/css">
    #wrap
    {
      display: table;
      height: 100%;
    }
  </style>
  <![endif]-->
  ...
</head>

这篇关于高度页 - Div结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！