Html 如何防止弹性项目溢出容器

发布于09月12日

因此，我需要一个页面，上面有一个100%宽度的标题和两个块-旁边和主要-适合在父块中低于它的剩余高度(其高度-100vh)，并且两者都位于水平基线上.Main可能包含太多内容，因此它需要沿Y轴滚动-只有其中的内容需要是可滚动的，其他部分(页眉和侧边栏)留在它们的位置上.所以我有这样的代码(问题在它之后继续):

body {
  margin: 0;
}

.fx-a {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  background: red;
}

.fx-b {
  flex-grow: 1;
  display: flex;
}

.aside {
  background: yellow;
  flex: 1;
}

.main {
  background: blue;
  flex: 3;
  overflow-y: scroll;
}

.test {
  margin-top: 100px;
}

<div class="fx-a">
  <header class="header">
    <h2>Title</h2>
  </header>
  <div class="fx-b">
    <aside class="aside"></aside>
    <main class="main">
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
    </main>
  </div>
</div>

但当Main中的内容增长时，Main也会增长，侧栏也会增长，因为它位于同一个弹性框中.然后，当我try 滚动时，整个页面都会滚动，这不是我需要的.仅用HTML和CSS怎么解决这个问题呢？

附注:我知道我可以手动设置页眉的高度，然后从100vh中减go 它，以保留备用高度和主要高度，但我认为情况并非如此-页眉的高度取决于其中的内容.

body { margin: 0; } .fx-a { height: 100vh; width: 100%; display: flex; flex-direction: column; } .header { background: red; } .fx-b { flex-grow: 1; display: flex; overflow: hidden; } .aside { background: yellow; flex: 1; } .main { background: blue; flex: 3; overflow-y: scroll; } .test { margin-top: 100px; }

<div class="fx-a"> <header class="header"> <h2>Title</h2> </header> <div class="fx-b"> <aside class="aside"></aside> <main class="main"> <div class="test">a</div> <div class="test">b</div> <div class="test">c</div> <div class="test">d</div> <div class="test">e</div> <div class="test">f</div> <div class="test">g</div> <div class="test">h</div> <div class="test">i</div> <div class="test">j</div> <div class="test">k</div> </main> </div> </div>

Html 如何防止弹性项目溢出容器

推荐答案

Html相关问答推荐

后续使用收件箱从网页表中提取值

如何将值从Google Sheets侧边栏中的表单中的输入传递到Google Sheets单元格中使用Textile()

无法使xpath为HTML代码块工作

隐藏滚动条和禁用文本 Select 的CSS技术？

窗口对象中是否有对<；html&>根元素的引用？

每个元素的CSS网格高度相等，以保持响应性

根据按钮位置左/右对齐按钮

如何用css在右侧创建多个半圆

carousel 的垂直滚动按钮居中

添加带有悬停动画的喜欢图标

是否可以制作响应式 CSS 剪辑路径？

为什么每当我调整图片大小时它都会使我的其他元素移动

XPATH Select h2标签和
标签之间或h2标签和标签之间的td元素，以立即为准

标签之间或h2标签和标签之间的td元素，以立即为准

如何从 razor 页面打开 html 页面

提交前的验证表单未显示任何验证消息？

鼠标悬停时切换 colored颜色的双色链接

如何使用 html 和 css 为卡片创建此背景框架

圆形边框显示在该部分后面.怎么修？

我如何使用 HTML 和 CSS 在我的下拉菜单中获得这种类型的样式

标题之间和之后的 Hr 线