gpt4 book ai didi

html - 正文溢出 : scroll not working as expected

转载 作者:太空宇宙 更新时间:2023-11-04 01:02:22 25 4
gpt4 key购买 nike

在下面的代码片段中,我希望 body 元素有滚动条,但它没有按预期运行。我将 html 元素设置为 height:100% 获取初始包含 block 的高度,而 body 是 100% 获取 html 元素的高度。现在我设置 overflow: scroll on body 以获得滚动条,因为我不希望这些框在 body 外部可见,但它们保留在同一个位置。我错过了什么?这只是一个测试,我正在学习和阅读 CSS 规范以了解 html 和 body 上的高度是如何工作的。谢谢。

body {
background-color: red;
height:100%;
overflow: scroll;
}

html {
background-color: yellow;
height: 100%;
}

.box {
width: 300px;
height: 300px;
background-color: blue;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

最佳答案

检查这些问题的第一个答案 -> why body overflow not working?

您需要将 overflow: auto 添加到您的 html 元素。

这是一支笔:https://codepen.io/sebaLinares/pen/NOOdJM

关于html - 正文溢出 : scroll not working as expected,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52979835/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com