如何调整网格大小以适应页面

我正在尝试制作一个小游戏，我希望它能在浏览器窗口中显示，而不需要滚动。我有一个页面的标题，然后是一个网格，有一些元素，我想根据窗口大小调整这些元素的大小。

我试着在标题上使用<body style="height: 100vh">和height: 5%，在网格上使用height: 95%，但它仍然溢出了页面，并显示了滚动条。我还试着分别在标题和网格上使用height: 5vh和height: 95vh，但都不起作用。

我不知道该尝试什么，在谷歌上也找不到任何东西。

这是我的代码：

* {
margin: 0px;
border: 0px;
padding: 0px;
}
body {
background: #007acc;
}
.title {
padding: 1%;
margin: 1% auto;
background: #ff9400;
border: 4px solid black;
border-radius: 20px;
text-align: center;
width: 90%;
}
.grid {
display: grid;
grid-template: auto auto auto auto auto / 70% 30%;
grid-gap: 1%;
width: 85%;
margin: 1% auto;
}
.music {
padding: 1%;
background: grey;
grid-area: 1 / 1 / span 1 / span 1;
font-size: 30px;
}
.chat {
padding: 1%;
background: white;
grid-area: 2 / 1 / span 3 / span 1;
overflow-y: scroll;
}
.input {
padding: 1%;
background: gray;
grid-area: 5 / 1 / span 1 / span 1;
font-size: 25px;
}
.chat .name {
color: red;
font-weight: bold;
}
.players {
padding: 1%;
background: #ffbf00;
border-radius: 20px;
grid-area: 1 / 2 / span 3 / span 1;
font-weight: bold;
}
.share {
width: 100%;
height: 100%;
border-radius: 20px;
grid-area: 4 / 2 / span 2 / span 1;
}

<div class="title">
<h1>Guess the song</h1>
</div>
<div class="grid">
<div class="music">
music
</div>
<div class="players">
<h2 style="text-align: center; color: indigo">Players:</h2>
<p>SamFF</p>
<p>SamFF</p>
<p>SamFF</p>
<p>SamFF</p>
</div>
<div class="chat">
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
</div>
<img class="share" src="images/share.jpg" alt="share">
<form class="">
<input type="text" name="" value="">
</form>
</div>

您可以通过将代码包装在容器中并为其提供一个具有相对高度的网格来解决此问题：

.container {
display: grid;
grid-template-columns: 100vw;
grid-template-rows: 70px calc(100vh - 70px);
}

和你的html:

* {
margin: 0px;
border: 0px;
padding: 0px;
}
body {
background: #007acc;
}
.container {
display: grid;
grid-template-columns: 100vw;
grid-template-rows: 70px calc(100vh - 70px);
}
.title {
padding: 10px;
margin: 10px auto;
background: #ff9400;
border: 4px solid black;
border-radius: 20px;
text-align: center;
width: 90%;
}
.grid {
display: grid;
grid-template: auto auto auto auto auto / 70% 30%;
grid-gap: 1%;
width: 85%;
margin: 1% auto;
}
.music {
padding: 1%;
background: grey;
grid-area: 1 / 1 / span 1 / span 1;
font-size: 30px;
}
.chat {
padding: 1%;
background: white;
grid-area: 2 / 1 / span 3 / span 1;
overflow-y: scroll;
}
.input {
padding: 1%;
background: gray;
grid-area: 5 / 1 / span 1 / span 1;
font-size: 25px;
}
.chat .name {
color: red;
font-weight: bold;
}
.players {
padding: 1%;
background: #ffbf00;
border-radius: 20px;
grid-area: 1 / 2 / span 3 / span 1;
font-weight: bold;
}
.share {
width: 100%;
height: 100%;
border-radius: 20px;
grid-area: 4 / 2 / span 2 / span 1;
}

<body>
<div class="container">
<div class="title">
<h1>Guess the song</h1>
</div>
<div class="grid">
<div class="music">
music
</div>
<div class="players">
<h2 style="text-align: center; color: indigo">Players:</h2>
<p>SamFF</p>
<p>SamFF</p>
<p>SamFF</p>
<p>SamFF</p>
</div>
<div class="chat">
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
<div class="message">
<span class="name">SamFF:</span> Hello world!
</div>
</div>
<img class="share" src="images/share.jpg" alt="share">
<form class="">
<input type="text" name="" value="">
</form>
</div>
</div>
</body>

相关内容

最新更新

热门标签：