Question

我正在尝试进行包含页眉，内容和页脚的布局。页脚必须在页面底部（完成）。但我的问题是如何在页眉和页脚之间获得100％的内容。当我的内容为空时，我无法看到，但是当我在内容div中写入一些单词html时，如“hello”，那么内容只比内容中的内容长。我想你可以理解我的意思。有人可以解释我的css代码中有什么问题。

红色是标题，绿色是页脚，青色是内容，蓝色是容器。问题是内容不包括容器区域。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Praktika1</title>

<link rel="stylesheet" href="style1.css" type="text/css" />

</head>

<body>

<div id="container">

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

    <div id="content"> 


     </div>

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

</div>

</body>
</html>

CSS：

@CHARSET "UTF-8";
*{padding:0; margin:0;}

html,body{
 height:100%;
 }

#container{

 width: 1024px;
 position:relative;
 background-color:#cce;
 margin: 0 auto;
 min-height:100%; 
 }

#header{

 width: 1024px;
 height:100px;
 background-color: #CCC;
 }

#content{
  height:100%;
  width:1024px;
  background-color:yellow;
 } 

#footer{
 width: 1024px;
 height: 100px;
 position:absolute;
 bottom:0;
 background-color: #ced;
 }

Answer 1

你很幸运。昨天我花了很多时间搞清楚一个类似的问题。

http://andrew.x10.mx/rene/

html -

 <div id="container">
  <div id="header">
   <div id="header-content">
    Hai der. I'm a header.
   </div>
  </div>
  <div id="content">
   <h1>Content here</h1>
   <div id="footer">
    <div id="footer-content">
     I'm a footer lol
    </div>
   </div>
  </div>                       
 </div>

css -

html,body  {
 height: 100%;
 margin: 0;
 padding: 0;
 text-align: center;
}

 #header {
 background: #0f0;
 top: 0;
 left: 0;
 position: absolute;
 width: 100%;
 }

 #header-content {
  padding: 10px;
  }


#container {
 background: #ff0;
 height:auto !important; 
 height:100%; 
 position:relative;
 width: 1024px;
 text-align: left;
 margin: 0 auto;
 min-height:100%; 
 }  

 #content { padding: 20px 10px; }

#footer {
 background: #f00;
 bottom: 0;
 left: 0;
 position: absolute;
 width: 100%;
 text-align: center;
 }

 #footer-content { padding: 10px; }

Answer 2

没有HTML很难说，但我会尝试将％100的最小高度添加到#content

Answer 3

一个解决方案就是：

#content{
    background-color:yellow;
    position:absolute;
    top:100px;
    bottom:100px;
    width:100%;
}

您可以在页面的所有三个部分（页眉，内容，页脚）上使用绝对定位：

现场演示： http://jsfiddle.net/bBEJ6/

Answer 4

您的问题措辞非常糟糕，但从我可以看到您希望您的内容填满您网页的100％，但您已使用{{1}在#content部分指定了特定的宽度属性。

尝试width:1024px，看看这是否能解决您的问题。

内容100％伸展

4 个答案: