#html #css
#HTML #CSS
Вопрос:
Я пытаюсь сделать небольшую игру, и я хочу, чтобы она помещалась в окне браузера без прокрутки. У меня есть заголовок страницы, а затем сетка с некоторыми элементами, и я хотел бы изменить их размер в соответствии с размером окна.
Я пытался использовать lt;body style="height: 100vh"gt; и height: 5% на заголовке, и height: 95% на сетке, но она все равно переполняла страницу и показывала полосу прокрутки. Я также попытался использовать height: 5vh и height: 95vh в заголовке и в сетке соответственно, но это тоже не сработало.
У меня нет больше идей о том, что попробовать, и я ничего не могу найти в Google.
Вот мой код:
* { 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; } lt;div class="title"gt; lt;h1gt;Guess the songlt;/h1gt; lt;/divgt; lt;div class="grid"gt; lt;div class="music"gt; music lt;/divgt; lt;div class="players"gt; lt;h2 style="text-align: center; color: indigo"gt;Players:lt;/h2gt; lt;pgt;SamFFlt;/pgt; lt;pgt;SamFFlt;/pgt; lt;pgt;SamFFlt;/pgt; lt;pgt;SamFFlt;/pgt; lt;/divgt; lt;div class="chat"gt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;/divgt; lt;img class="share" src="images/share.jpg" alt="share"gt; lt;form class=""gt; lt;input type="text" name="" value=""gt; lt;/formgt; lt;/divgt; Ответ №1:
Вы могли бы решить эту проблему, поместив свой код в контейнер и предоставив ему сетку с относительными высотами:
.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; } lt;bodygt; lt;div class="container"gt; lt;div class="title"gt; lt;h1gt;Guess the songlt;/h1gt; lt;/divgt; lt;div class="grid"gt; lt;div class="music"gt; music lt;/divgt; lt;div class="players"gt; lt;h2 style="text-align: center; color: indigo"gt;Players:lt;/h2gt; lt;pgt;SamFFlt;/pgt; lt;pgt;SamFFlt;/pgt; lt;pgt;SamFFlt;/pgt; lt;pgt;SamFFlt;/pgt; lt;/divgt; lt;div class="chat"gt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;div class="message"gt; lt;span class="name"gt;SamFF:lt;/spangt; Hello world! lt;/divgt; lt;/divgt; lt;img class="share" src="images/share.jpg" alt="share"gt; lt;form class=""gt; lt;input type="text" name="" value=""gt; lt;/formgt; lt;/divgt; lt;/divgt; lt;/bodygt;