Question

我想创建一个HTML页面：

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

我有两个与{width：100％}和{height：100％}相关的问题。

我的标题是页面宽度的100％，当我期望它是其父宽度的100％时。背景出现在窗口高度的100％处，但随后会向上滚动内容。

在理解CSS如何处理这两种情况下的100％价值时，我将不胜感激。我不是要求解决方法：我已经有了。我想要深入了解CSS的思维方式。

非常感谢，

詹姆斯

Here's a demo of the issue

这是准系统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>

Answer 1

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

修复内容高度

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

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

Answer 2

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

关于宽度：盒子模型通常是问题。我开始每个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%;
}

然后使用填充在容器上设置宽度，首先是移动宽度，然后是要覆盖的屏幕宽度：

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

            #container {
            padding: 0% 30%;
            }

        }

要获得完整版面，您可以访问我的网站： http://instancia.net/fluid-sticky-footer-layout/

我应该将移动位添加到该页面。：）

100％窗高| 100％父div宽度

2 个答案: