Полоса прокрутки Бесплатный макет сайта во всех разрешениях с использованием только CSS

Question

У меня странное требование для веб-приложения (одностраничного веб-приложения), в котором на странице не должно быть полосы прокрутки. Верхний и нижний колонтитулы остаются неизменными, а средняя часть контента должна корректироваться (сохраняя пропорции) без полосы прокрутки в любом разрешении. Ниже приведен предварительный просмотр макета.

Live Demo - https://previewin.xyz/web/sree/layout/

CodePen Demo - https://codepen.io/DeCodeUI/pen/gZBXqa

CSS

header {
  position: fixed;
  width: 100%;
  height: 50px;
  background: #333;
  z-index: 500;
  left: 0;
  top: 0;
}

footer {
  position: fixed;
  width: 100%;
  height: 50px;
  background: #333;
  z-index: 500;
  left: 0;
  bottom: 0;
}

#content {
  width: 80%;
  height: 100vh;
  padding: 60px 15px;
}

#grid {
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-around;
}

.grid-item {
  width: 300px;
  height: 100px;
  background: blue;
}

Образец HTML

<div id="page">

  <header>Text</header>

  <div id="content">

    <div id="grid">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </div>

  </div>

  <footer>Text</footer>

</div>

Эти 9 сеток синего цвета всегда сохраняют пропорции в любом разрешении и без полос прокрутки. Я старался изо всех сил, и результат здесь - https://previewin.xyz/web/sree/layout/, но когда экран становится меньше, сетки не меняются. Есть идеи, чтобы решить эту проблему?

Answer 1

Просто измените контейнер width:100% и установите max-width:1160px в соответствии с вашими требованиями в вашем коде. Если вы установите ширину для контейнера, реагирующую на изменение размера браузера, это станет проблемой. Я надеюсь, что это решение будет работать для вас.

.container {
    max-width: 1160px;
    width: 100%;
}
header {
    position: fixed;
    width: 100%;
    height: 50px;
    background: #333;
    z-index: 500;
    left:0;
    top: 0;
}
footer {
    position: fixed;
    width: 100%;
    height: 50px;
    background: #333;
    z-index: 500;
    left:0;
    bottom: 0;
}
#content {
    width: 80%;
    height: 100vh;
    padding: 60px 15px;
}
#grid {
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
}
.grid-item {
   width: 150px;
   height: 100px;
   background: blue;
   margin: 10px;
   padding:30px;
   color:#fff;
   text-align:center;
   align-self: center;
}

<div id="page">
    <div class="container">
        <header>Text</header>
        <div id="content">
            <div id="grid">
                <div class="grid-item">1</div>
                <div class="grid-item">2</div>
                <div class="grid-item">3</div>
                <div class="grid-item">4</div>
                <div class="grid-item">5</div>
                <div class="grid-item">6</div>
                <div class="grid-item">7</div>
                <div class="grid-item">8</div>
                <div class="grid-item">9</div>
            </div>
        </div>
        <footer>Text</footer>
    </div>
</div>