css 中的元素定位问题

Question

我尝试创建一个小型网站。现在我在定位几个 html 属性时遇到了问题。我要做的很简单：页眉的宽度应为 100% 并固定在顶部。页脚也应具有 100% 的宽度并固定在按钮上。垂直导航栏应填充页脚和页眉之间的 space。内容，应填充其余部分，边距为 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 的边距？

Answer 1

您正在对所有元素使用 100%，这会将底部推出视口，因此某些元素必须小于 100%

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

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

Answer 2

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

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

css 中的元素定位问题

Problems with element positioning in css

html

css

layout