Question

我有一个CSS网格布局，如下所示：https://codepen.io/anon/pen/KogEaq

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #222525;
  color: white;
}

#container {
  display: grid;
  grid-template-columns: 27fr 78fr;
  max-height: 100vh;
}

#left {
  grid-row: 1;
  grid-column: 1;
}

#right {
  grid-row: 1;
  grid-column: 2;
  max-height: 100%;
}

.box {
  margin: 8px;
  padding: 8px;
  border-radius: 10px;
  border: blue solid 2px;
  overflow-y: auto;
  max-height: 100%;
}

<div id="container">
  <div id="left">
    <div class="box">
      Navigation sidebar stuff here
    </div>
  </div>
  <div id="right">
    <div class="box">
      Page content
    </div>
  </div>
</div>

该页面旨在成为单页应用程序，并且正文不应滚动。 当网页内容变大时，我希望.box课程中的内容滚动。

问题是，.box网格中的#right和父#container列似乎超过了100vh容器设置的最大高度，因此<{1}}的{{1}}属性未被触发且内容被缩短。

修改如果我之前不清楚，问题是 overflow和.box元素不尊重父.box的{{1}}属性导致滚动问题。

Answer 1

问题不是max-height。它是.box元素（margin: 8px）上的上边距和下边距。添加到max-height: 100vh时，会导致错误容器溢出。如果您删除这些边距，并添加box-sizing: border-box（以考虑边框和填充），您的页面和overflow将按预期工作。

＆＃13;

body {
  margin: 0;
  background-color: #222525;
  color: white;
}

#container {
  display: grid;
  grid-template-columns: 27fr 78fr;
}

#left {
  grid-row: 1;
  grid-column: 1
}

#right {
  grid-row: 1;
  grid-column: 2;
}

.box {
  /* margin: 8px; */
  padding: 8px;
  border-radius: 10px;
  border: aqua solid 5px;
  max-height: 100vh;
  overflow: auto;
}

li {
  margin: 10px;
}

* { box-sizing: border-box; }

＆＃13;

<div id="container">
  <div id="left">
    <div class="box">Navigation sidebar stuff here</div>
  </div>
  <div id="right">
    <div class="box">
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

作为解决方案，请在父元素（padding: 8px和#right）上尝试#left。

如何防止css网格列超出网格容器的最大高度？

1 个答案: