内容100％伸展

我试图做有页眉，内容和页脚的布局。页脚必须位于页面底部（完成）。但我的问题是如何获得内容100％strech之间的页眉和页脚。当我的内容为空时，我看不到那个，但是当我在内容div中写入一些内容时，比如“hello”，那么内容只有内容中的内容。我想你可以理解我的意思。有人可以解释我的CSS代码中有什么问题。内容100％伸展

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

<!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; 
}

来源

2011-01-19 rnx

突出您的代码，然后单击`{}`按钮。它使您的代码对我们更具可读性。 – Andrew 2011-01-19 16:54:51

你可以发布你的HTML吗？ – 2011-01-19 16:55:27

我想在JSfiddle上测试。你打算让我自己写HTML代码吗？ `：`` – 2011-01-19 16:56:43

-1

你的问题的措辞非常糟糕，但是从我可以看到你想要的内容，以填补你的页面的100％，但你有通过使用width:1024px属性在您的#content部分指定了特定的宽度。

尝试width:100%看看是否可以解决您的问题。

来源

2011-01-19 16:57:27 dmackerman

很难说没有的HTML，但我会尝试添加％100分钟，高度＃内容

来源

2011-01-19 16:59:00

一个解决办法是这样的：

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

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

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

来源

2011-01-19 17:08:43

你很幸运。我昨天花了很多时间找出类似的问题。

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; }

来源

2011-01-19 17:09:05 Andrew

内容100％伸展

回答

相关问题