css中元素定位的问题答案

【问题标题】：Problems with element positioning in csscss中元素定位的问题
【发布时间】：2015-09-13 05:28:16
【问题描述】：

我尝试创建一个小型网站。现在我在定位几个 html 属性时遇到了问题。我要做的很简单：标题应该有 100% 的宽度并固定在顶部。页脚也应该有 100% 的宽度并固定在按钮上。垂直导航栏应填充页脚和页眉之间的空间。内容应填充其余部分，边距为 10px。这是我的实际尝试：

CSS： * { 边距：0px；填充：0px；边框：0px； }

html, body {
height: 100%;
width; 100%;
}

#pageWrapper {
height: 100%;
}

header{
height: 50px;
width: 100%;
background-color:yellow;
}

footer{
height: 50px;
width: 100%;
background-color:blue;
}

#mainWrapper{
width:100%;
height: 100%;
background-color:black;
}

#mainWrapper #navigation {
width: 250px;
height: 100%;
background-color:orange;
float: left;
}

#mainWrapper #content {
height: 100%;
width: 100%;
background-color: green;
}

HTML：

<body>

    <div id="pageWrapper">
        <header>

        </header>

        <div id="mainWrapper">
            <div id="navigation">

            </div>

            <div id="content">
                <p>Test content</p>
            </div>
        </div>

        <footer>

        </footer>
    </div>
</body>

https://jsfiddle.net/6ptmq4ce/3/

你可以看到，这个页面的尺寸大于100%，有一个滚动条。我怎样才能让这个滚动条消失？以及如何为内容设置 10px 的边距？

【问题讨论】：

标签： html css layout

【解决方案1】：

您将100% 用于将底部推出视口的所有元素，因此某些元素必须小于100%

#mainWrapper {
    height: calc(100% - 100px);
}

-100px 表示去掉页眉和页脚

【讨论】：

【解决方案2】：

如果您不介意使用vh，您可以像this 一样解决它。

我们只是使用height:10vh 使页脚和页眉各占视口高度的 10%，height:80vh 使内容占 80%

【讨论】：