在CSS网格布局中，子div的宽度超过父元素，并且使用内容查询
我正在设计一个个人静态网页，对HTML和 CSS的经验只有一些零散的尝试。尽管如此，在查找最佳实践信息时，我决定使用媒体查询来处理字体大小（支持移动端/桌面端）并使用相对单位。
我为我的主页实现了我想要的布局，覆盖整个视口，一切都非常基础，呈现出灰盒风格，以便最初保持简单。
问题在于某个子div出于某种原因只有在窗口尺寸较小时才会变得比视口本身更宽更高（例如500x403；在513x421时就不会再发生）。
你能帮我找出问题所在吗？ 下面是我的HTML/CSS：
@font-face {
font-family: "Fredericka the Great";
src: url("./Fonts/FrederickatheGreat-Regular.ttf");
src: url("./Fonts/FrederickatheGreat-Regular.ttf") format("truetype");
}
/* Futura Medium */
@font-face {
font-family: "Futura Medium";
src: url("./Fonts/FuturaStd-Medium.otf");
src: url("./Fonts/FuturaStd-Medium.otf") format("opentype");
}
/* Adjust raw configurations */
body {
margin: 0;
padding: 0;
background: blanchedalmond;
}
/* Homepage header configuration */
.homepage-header {
container-type: inline-size;
width: 100vw;
height: 100vh;
}
.homepage-header-box {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto;
align-content: center;
justify-items: center;
text-align: center;
width: 100%;
height: 100%;
overflow: visible;
}
.homepage-header-box h1 {
margin: 0;
grid-column: 1 / 2;
grid-row: 1 / 2;
font-family: "Fredericka the Great", sans-serif;
font-weight: 400;
font-size: 1rem;
}
.homepage-header-box p {
margin: 0;
grid-column: 1 / 2;
grid-row: 2 / 3;
font-family: "Futura Medium", sans-serif;
font-weight: 400;
font-size: 1rem;
}
/* Homepage header font size handling */
@container (width > 720px) {
.homepage-header-box h1 {
font-size: 7vw;
}
.homepage-header-box p {
font-size: 2.25vw;
}
}
@container (width <=720px) {
.homepage-header-box h1 {
font-size: 18vw;
}
.homepage-header-box p {
font-size: 6vw;
}
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>My Pretty Site</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="homepage-header">
<div class="homepage-header-box">
<h1>My pretty awesome text</h1>
<p>And that other amazing text that I produced for you guys</p>
</div>
</header>
</body>
</html>
解决方案
不要使用 width:100vw，因为在某些浏览器中它会包含滚动条的宽度。因此当你的内容溢出区域时，滚动条会出现，100vw也就比可用的水平空间要大。
请改用如下：
homepage-header {
width: 100%;
min-height: 100vh;
}
此外，如果内容是动态的，并且你没有固定的带有子元素的设计，你可以选择性地添加 overflow-x:hidden 以防止出现水平滚动条。
附注： 你可以使用CSS的 clamp 函数来根据视口大小管理字体大小。
站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。
相关文章
汇集全球数千款 AI 工具，每日持续更新，配套 AI 开发学习资源，轻松用 AI 提升工作效率。快捷键 Ctrl+D/⌘+D 一键收藏本站。