gpt4 book ai didi

html - 将两个 div 放在彼此下方时不需要的滚动条

转载 作者:行者123 更新时间:2023-11-28 15:12:21 25 4
gpt4 key购买 nike

我有两个全屏 div,它们彼此相对放置。但是当我访问该页面时,浏览器总是显示不需要的滚动条和大于 100vw 的宽度。当只有一个 div 时,整个事情就像一个魅力。在这里将不胜感激:)

    <html>
<head>
<link rel="stylesheet" type="text/css" href="normalize.css">
<style>
.section {
position: relative;
width: 100vw;
height: 100vh;
background-color: red;

}

.section.second {
background-color: green;
}
</style>


</head>
<body>

<div class="section">ASD1</div>

<div class="section second">ASD2</div>



</body>
</html>

最佳答案

这是一个已知问题。

根据 https://caniuse.com/#feat=viewport-units ,

"Currently all browsers but Firefox incorrectly consider 100vw to be the entire page width, including vertical scroll bar, which can cause a horizontal scroll bar when overflow: auto is set."

您可以添加以下 CSS 样式来修复它,

html, body {margin: 0; padding: 0; overflow-x:hidden;}

Example (JSBin)

关于html - 将两个 div 放在彼此下方时不需要的滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48692074/

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