仅使用CSS

Question

我对Web应用程序（单页Web应用程序）有一个奇怪的要求，在该应用程序中页面不应具有滚动条。页眉和页脚保持粘性，中间内容部分应调整（保持比例），而无需任何分辨率的滚动条。以下是布局的预览。

实时演示-https://previewin.xyz/web/sree/layout/

CodePen演示-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>