100％窗高| 100％父div宽度

Question

I want to create an HTML page which: 我想创建一个HTML页面，其中：

Appears centred horizontally 出现水平居中
Has a white background the entire height of the window 整个窗口高度为白色背景
Contains a fixed header and scrollable content 包含固定的标题和可滚动的内容

I am having two issues related to {width: 100%} and {height: 100%}. 我遇到两个与{width：100％}和{height：100％}有关的问题。

My header is 100% of the page width, when I expect it to be 100% of its parent width. 我的标题是页面宽度的100％，而我希望它是其父宽度的100％。 The background appears at 100% of the window height, but it then scrolls up with the content. 背景出现在窗口高度的100％处，但随后随内容向上滚动。

I would appreciate any help in understanding how CSS treats the 100% value in these two cases. 在理解CSS如何处理这两种情况下的100％价值方面，我将不胜感激。 I am not asking for a workaround: I already have that. 我不需要解决方法：我已经有了。 I am asking for insights into the way CSS thinks. 我正在寻求有关CSS思维方式的见解。

Many thanks in advance, 提前谢谢了，

James 詹姆士

Here's a demo of the issue 这是问题的演示

And here's the barebones HTML: 这是准系统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

Fix header 修复标题
Change the header position fixed to position absolute 改变标题位置fixed到位置absolute

Fix content height 固定内容高度

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

Live example with pos fixed 固定位置的实时示例
http://jsfiddle.net/qB4sD/1/ http://jsfiddle.net/qB4sD/1/

Answer 2

All of these fixed positions are going to give you headaches. 所有这些固定职位都会让您头疼。

About the widths: the box model is usually the problem. 关于宽度：盒子模型通常是个问题。 I start every CSS with body height and width set to 100%, and then reset my box model so it matches across browsers, and applies all of my padding to the inside of a box instead of the outside: 我将每个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%;
}

Then set your width on a container using padding, first the mobile width, then the screen width to override: 然后使用填充在容器上设置宽度，首先是移动宽度，然后是要覆盖的屏幕宽度：

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

            #container {
            padding: 0% 30%;
            }

        }

For a full layout, you can visit my site: http://instancia.net/fluid-sticky-footer-layout/ 有关完整布局，您可以访问我的网站： http : //instancia.net/fluid-sticky-footer-layout/

I should probably add the mobile bit to that page. 我可能应该将移动功能添加到该页面。 :) :)

100％窗高| 100％父div宽度

问题描述

2 个解决方案

解决方案1
0 2013-01-18 18:45:26

解决方案2
0 2013-01-18 20:01:26

100％窗高| 100％父div宽度

问题描述

2 个解决方案

解决方案1 0 2013-01-18 18:45:26

解决方案2 0 2013-01-18 20:01:26

解决方案1
0 2013-01-18 18:45:26

解决方案2
0 2013-01-18 20:01:26