时间戳

首页 > 解决方案 > 盒子怎么修？

html - 盒子怎么修？

问题描述

我有一个包含简单页眉和页脚的框。问题是底部出现了一个滚动条，我不会。我知道这是非常愚蠢的问题，但我不知道如何解决它。

.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>

标签： htmlcss

解决方案

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

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>

推荐阅读