时间戳

首页 > 解决方案 > 如何防止网格布局 div 溢出视口？

html - 如何防止网格布局 div 溢出视口？

问题描述

所以我的网格中有 2 个 div。第一个 div 可以很小也可以很大，但不能超过屏幕大小。第二个 div 的固定大小为 40px。

所以第一个 div 应该是

  1. 屏幕尺寸 - 40px
  2. 内容的大小（如果小于 1。）

超出screen size - 40px限制的内容将通过 显示overflow: scroll。

.outer__grid {
  display: grid;
  grid-template-rows: 200px;
  grid-template-columns: 1fr 250px;
}

.content__one {
  width: 3000px;
  overflow: scroll;
  background-color: red;
}

.content__two {
  width: 40px;
  background-color: blue;
}
<div class="outer__grid">
  <div class="content__one"></div>
  <div class="content__two"></div>
</div>

使用这种方法，第一个 div 永远不会溢出，因此是 3000px 宽。

我创建了一个简单的 JSFiddle 来表达我的代码问题：https ://jsfiddle.net/n9851dzm/7/

标签： htmlcsscss-grid

解决方案

我已经稍微更改了您的 html 并据此重写了 css。请检查一下：

HTML：

<div class="outer__grid">
  <div class="content__one">
    <<div class="inner-content">Inner Content</div>
  </div>
    <div class="content__two">

  </div>
</div>

CSS：

.outer__grid {
  display: grid;
  grid-template-rows: 200px;
  grid-template-columns: 1fr 40px;
  max-width: 100%;
  overflow:hidden;
}

.content__one {
  overflow: auto;
  background-color: red;
}
.inner-content {
  width: 3000px;
}

.content__two {
  background-color: blue;
}

推荐阅读