Html 如何防止分数网格调整大小？ 制作商店登录页 *{ 框大小：边框框； 保证金：0； 填充：0； } .集装箱{ 显示：网格； 网格模板区域： “标题” “主广告” “页脚”； 边框：橙色实心10px； 高度：100vh； 宽度：100%； 网格模板行：1fr 5fr 1fr； } .表格项目{ 边框：黑色实心3px； } .标题{ 网格区域：标题； } #标题{ 文本对齐：居中； 位置：相对位置； 底部：-60px； } .广告{ 网格区域：ads； } 梅因先生{ 网格区域：主； 身高：100%； } .页脚{ 网格区域：页脚； } #导航栏{ 高度：40px； 宽度：100%； 位置：固定； 排名：0； 左：0； 背景色：#EAEAFF； 填充：0； 保证金：0； } 这是标题
WaodnawdsoawnhdsoawndoawdnawodsnawoudsnaswoudnswaondawoudsaswnHtml 如何防止分数网格调整大小？ 制作商店登录页 *{ 框大小：边框框； 保证金：0； 填充：0； } .集装箱{ 显示：网格； 网格模板区域： “标题” “主广告” “页脚”； 边框：橙色实心10px； 高度：100vh； 宽度：100%； 网格模板行：1fr 5fr 1fr； } .表格项目{ 边框：黑色实心3px； } .标题{ 网格区域：标题； } #标题{ 文本对齐：居中； 位置：相对位置； 底部：-60px； } .广告{ 网格区域：ads； } 梅因先生{ 网格区域：主； 身高：100%； } .页脚{ 网格区域：页脚； } #导航栏{ 高度：40px； 宽度：100%； 位置：固定； 排名：0； 左：0； 背景色：#EAEAFF； 填充：0； 保证金：0； } 这是标题,html,css,css-grid,Html,Css,Css Grid,Waodnawdsoawnhdsoawndoawdnawodsnawoudsnaswoudnswaondawoudsaswn 我试着让它，当我把文本放在主div中时，它不会影响div的墙壁，而是保持在原位。我很难适应html/css或网格，因为我对html/css或网格非常陌生，但我想在我的很多项目中使用网格。我注意到它非常容易设置，在很多情况下对我有帮助，但这次我几乎不知道在这种情况下该怎么办。使用适当的文本开始，但不要使用分数单位。使用百分比。在表格中显示您的问题screenshot@Pa
我试着让它，当我把文本放在主div中时，它不会影响div的墙壁，而是保持在原位。我很难适应html/css或网格，因为我对html/css或网格非常陌生，但我想在我的很多项目中使用网格。我注意到它非常容易设置，在很多情况下对我有帮助，但这次我几乎不知道在这种情况下该怎么办。使用适当的文本开始，但不要使用分数单位。使用百分比。在表格中显示您的问题screenshot@Paulie_D感谢您的帮助，我通常不使用分数单位，但我使用了百分比并指定了列大小，现在我的文本不会折叠墙：D
<!DOCTYPE html>
<html>
<head>
<title>Making a Shop Landing Page</title>
</head>
<style>
*{
box-sizing:border-box;
margin:0;
padding:0;
}
.container{
display:grid;
grid-template-areas:
"header header header"
"ads main main"
"footer footer footer";
border:orange solid 10px;
height:100vh;
width:100%;
grid-template-rows:1fr 5fr 1fr;
}
.grid-item{
border:black solid 3px;
}
.header{
grid-area:header;
}
#header{
text-align:center;
position:relative;
bottom:-60px;
}
.ads{
grid-area:ads;
}
.main{
grid-area:main;
height:100%;
}
.footer{
grid-area:footer;
}
#navbar {
height: 40px;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #EAEAFF;
padding: 0;
margin: 0;
}
</style>
<body>
<div id="navbar">
<ul>
<li><a href="#">Halp</a></li>
<li><a href="#">Me</a></li>
<li><a href="#">PLS</a></li>
</ul>
</div>
<div class="container">
<div class="header grid-item">
<h1 id="header">This is the Title</h1>
</div>
<div class="ads grid-item"></div>
<div class="main grid-item">
<p>waodnawdsoawnhdsoawndoawdnawodsnawoudsnaswoudsnswaondawoudsaswn</p>
</div>
<div class="footer grid-item"></div>
</div>
</body>
</html>