Question

我有一个盒子，里面有一个简单的页眉和页脚。问题是在底部没有出现滚动条。我知道这是一个非常愚蠢的问题，但是我不知道该如何解决。

.box{
    width: 100%;
    height: 100%;
}

.header {
    background: tomato;
    position: absolute;
    top: 0;
    width: 100%;
    height: 5%;
}

.footer {
    background: lightgreen;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5%;
}

<!DOCTYPE html>
<html>
<title>Test</title>
<head>
    <link rel="stylesheet" href="Style/StyleSheet.css">
    <script type="text/javascript" src="Script/Script.js"></script>
    <title>Test</title>
</head>
<body>
    <div class="box">
        <header class="header">Header</header>
        <footer class="footer">Footer</footer>
    </div>
</body>
</html>

Answer 1

默认情况下，浏览器为正文提供自定义边距。只需设置

body{
  margin:0;
}

body{
  margin:0;
}

.box{
    width: 100%;
    height: 100%;
}

.header {
    background: tomato;
    position: absolute;
    top: 0;
    width: 100%;
    height: 5%;
}

.footer {
    background: lightgreen;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5%;
}

<!DOCTYPE html>
<html>


<title>Test</title>



<head>
    <link rel="stylesheet" href="Style/StyleSheet.css">
    <script type="text/javascript" src="Script/Script.js"></script>
    <title>Test</title>
</head>



<body>
    <div class="box">
        <header class="header">Header</header>




        <footer class="footer">Footer</footer>
    </div>
</body>
</html>

Answer 2

为身体应用margin:0

body {
  margin: 0;
}

.box {
  width: 100%;
  height: 100%;
}

.header {
  background: tomato;
  position: absolute;
  top: 0;
  width: 100%;
  height: 5%;
  padding: 10px 0px
}

.footer {
  background: lightgreen;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5%;
  padding: 10px 0px
}

<!DOCTYPE html>
<html>
<title>Test</title>

<head>
  <link rel="stylesheet" href="Style/StyleSheet.css">
  <script type="text/javascript" src="Script/Script.js"></script>
  <title>Test</title>
</head>

<body>
  <div class="box">
    <header class="header">Header</header>

    <footer class="footer">Footer</footer>
  </div>
</body>

</html>

如何固定盒子？

2 个答案: