如何在没有滚动条弹出窗口的情况下填充视口

HTML_新手

我可以在我的网站上滚动几个像素，这很烦人，因为我只想在最小化视口时能够滚动。如果我按 F11，它仍然有一个很小的滚动条。这是我到目前为止尝试编写的代码，但我仍然一无所知：

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A Tribute Page</title>
    <link rel="stylesheet"href="stylesheet.css"/>
    </head>
<body>
    <h1>A Tribute Page</h1>
        <div class="parent">
            <div class="child">
                <p>alot of text</p>
            </div>
        </div>
</body>
</html>

css：

html{
  height: 100%;
}
body {
  min-height: 100%;
  background-color: lightblue;
}
h1 {
  position: absolute;
  font-size: 55px;
  top: 0px;
}
.parent {
    position: absolute;
    top: 15%;
    margin-left: 33%;
    margin-right: 33%;
    background-color: yellow;
}
.child {
    position: relative;
    background-color: white;
    margin: 20px;
    padding: 10px;
    word-wrap: break-word;
}

[问题的Gyazo-gif]

笔记！极限初学者C：

调制解调器

我认为发生这种情况的原因是 height:100% 被一遍又一遍地重新计算，请尝试height从您的 html 中删除或使用92vh代替100%，另一种方法是为margin

html{
}
body {
  min-height: 100%;
  background-color: lightblue;
}
h1 {
  position: absolute;
  font-size: 55px;
  top: 0px;
}
.parent {
    position: absolute;
    top: 15%;
    margin-left: 33%;
    margin-right: 33%;
    background-color: yellow;
}
.child {
    position: relative;
    background-color: white;
    margin: 20px;
    padding: 10px;
    word-wrap: break-word;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A Tribute Page</title>
    <link rel="stylesheet"href="stylesheet.css"/>
    </head>
<body>
    <h1>A Tribute Page</h1>
        <div class="parent">
            <div class="child">
                <p>alot of text</p>
            </div>
        </div>
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。