0

我想创建一个 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>

4

2 回答 2

0

修复标题
将标题位置更改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/

于 2013-01-18T18:45:26.733 回答
0

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

关于宽度：盒子模型通常是问题所在。我开始每个 CSS 时将 body 高度和宽度设置为 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/

我可能应该将移动位添加到该页面。:)

于 2013-01-18T20:01:26.877 回答