100%窗口高度| 100%父div宽度

我想创建一个HTML页面:

显示水平居中
具有整个窗口高度的白色背景
包含固定标题和可滚动内容

我有两个问题与{width: 100%}和{height: 100%}有关。

我的页眉是页面宽度的100%，当我希望它是其父宽度的100%。背景显示在窗口高度的100%，但它会随着内容向上滚动。

如果能帮助我理解CSS在这两种情况下如何处理100%的值，我将不胜感激。我不是在要求变通:我已经有了。我想知道CSS是如何思考的。

提前感谢，

詹姆斯

下面是这个问题的演示

这是基本的HTML:

<!DOCTYPE html>
<head>
<title>Width & Height 100%</title>
<style>
html {
    height:100%;
}
body {
    background: #666;
    height: 100%;
    margin: 0;
}
#container {
    position: relative;
    height:100%;
    background: white;
    width: 400px;
    margin: 0 auto;
    padding: 0 0;
}
#header {
    position:fixed;
    z-index:100;
    background:#ffe;
    /* width:760px; */
    width:100%;
    height:64px;
}
#content {
    position: absolute;
    left:20px;
    width:360px;
    height:360px;
    margin:64px 0 0 0;
    background:#efe;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        Fixed header
    </div>
    <div id="content">
        Scrollable content
    </div>
</div>
</body>
</html>

所有这些固定的位置都会让你头疼。

关于宽度:盒子模型通常是问题所在。我开始的每一个CSS的主体高度和宽度设置为100%，然后重置我的盒子模型，使其匹配跨浏览器，并应用我所有的填充框的内部而不是外部:

/* Set box models to match across browsers. */
* {
 box-sizing:border-box;
 -moz-box-sizing:border-box;
 webkit-box-sizing:border-box;
 max-width:100%;
}

然后使用padding设置容器的宽度，首先是移动宽度，然后是要覆盖的屏幕宽度:

#container {
    padding: 0px 10px;
}
        @media only screen
        and (min-width : 700px) {
            #container {
            padding: 0% 30%;
            }
        }

完整的布局，你可以访问我的网站:http://instancia.net/fluid-sticky-footer-layout/

我可能应该把移动部分添加到该页。:)

修复头
将标题位置fixed更改为位置absolute

固定内容高度

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#container{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    background:#efe;
}
#content {
    padding: 64px 20px 0;
}

pos固定的实例
http://jsfiddle.net/qB4sD/1/

相关内容

最新更新

热门标签：