Question

我想在页面底部制作一个粘性页眉和页脚

这两个陈述让我发疯，因为它给了我一个滚动条。

.header {
        opacity: 0.95;
        padding-left: 3.7%;
        list-style-type: none;
        margin: 0;
        background-color: #4b4b4b;
        font-family: 'Roboto', sans-serif;
        background-image: url('img/icon.png');
        background-repeat: no-repeat;
        background-position: 14px 7px;
        background-size: 40px;
        position: absolute;
        width: 100%;
        z-index: 100;
}

.footer {
        bottom: 0;
        opacity: 0.9;
        width: 100%;
        background-color: #4b4b4b;
        color: #878787;
        text-align: center;
        padding: 6px 16px;
        font-family: 'Roboto', sans-serif;
        margin-top: 4%;
        left: 10px;
        right: 10px;
    }

我该如何避免使用这些滚动条？

谢谢！

Answer 1

这很难，因为你没有提供任何html结构或很多css。我猜你没有任何填充重置或盒子大小。尝试在css上添加此行。不确定你的级别，但asterix意味着适用于所有元素。

* {
  box-sizing: border-box;
}

Answer 2

你可以通过多种方式实现这一目标（以下是其中之一）

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  margin:0;
  padding:0;
}
.header {
        opacity: 0.95;
        background-color: #4b4b4b;
        position: fixed;
        top:0;
        left:0;
        right:0;
        height:80px;
}
.main-content {
margin-top: 80px;
min-height: 100vh;
}

.footer {
      height:80px;
      background-color: #4b4b4b;
    }

<header class="header">
Header
</header>
<div class="main-content">
Content
</div>
<footer class="footer">
Footer
</footer>

宽度：100％;给我一个滚动条

2 个答案: