Question

所以我有以下问题：

<!DOCTYPE html>
<html>
<head>
    <title>grouping Divs</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
    <div id="header"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div id="footer"></div>
</body>
</html>

所以基本上4个div，每个div组成网页上的元素。 CSS：

#header {
    height: 40px;
    width: 100%;
    background-color: brown;
    border-radius: 5px;

    position: fixed;
}

.left {
    height: 2000px;
    width: 70px;
    background-color: magenta;
    border-radius: 5px;

    float: left;
}

.right {
    height: 2000px;
    width: 70px;
    background-color: magenta;
    border-radius: 5px;

    float: right;
}

#footer {
    height: 60px;
    width: 100%;
    background-color: brown;
    border-radius: 5px;

    clear: both;
}

现在我喜欢做的是以与页脚相同的方式显示标题，只有这样才能保持帖子固定。我尝试的所有东西似乎都提出了问题，删除了位置：从标题中修复了问题，但是我想保持它固定。将宽度设置为99％仅适用于屏幕分辨率正确的情况。

我真的不知道接下来该做什么，所以任何帮助肯定会受到赞赏！

Answer 1

添加：

body {
    margin: 5px;
    padding: 0;
}

这将删除身体的边距和填充，它将使其看起来完全符合您的意愿。

并为css中可用的宽度添加calc（）函数：

#header {
    width: calc(100% - 10px);
}

演示jsfiddle。

Answer 2

您可以执行此操作（默认情况下，<body>会带来一些padding）

<强> CSS

body{
    margin:0;
    padding:0;
}

<强> DEMO HERE

CSS使用固定标头保留右边距

2 个答案: