Question

http://www.xs4all.nl/~peterned/examples/csslayout1.html

上面的教程基本上是我想要的一个白色列，它扩展到浏览器的底部。在教程中它实际上从顶部开始，标题是覆盖白色的不同灰色阴影。

我的情况是，标题必须与纹理背景相匹配。所以，我想要的是让容器从标题下面开始。我不知道是否可能，因为现在我的标题将容器推下来了。

Answer 1

http://andrew.x10.mx/adam/

html -

<!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>for adam</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="header">

    </div>
    <div id="container">
        <br class="push"></br>
        <div id="content">
            <h1>Hi</h1>
        </div>                       
    </div>
</body>
</html>

css -

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

 #header {
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    width:100%;
    height: 49px;
    background: #fff url("bg.png") repeat-x top left;
    padding: 0;  
    }

.push {
    width: 860px;
    height: 49px;
    margin: 0;
    }

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

#content { padding: 10px; }

仅在Firefox中测试过它。：）

更新：随时验证。 :) 更新v2：在容器内添加内容时出现问题。现在修复了，但不得不做一些更复杂的事情。

获得100％的身高不是从顶部开始？

1 个答案: