CSS防止子项溢出父项高度

xuo3flqw  于 2023-01-10  发布在  其他
关注(0)|答案(2)|浏览(233)

我有以下CSS布局：

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

nav {
  background-color: darkslateblue;
  color: white;
  padding: 20px;
}

main h2 {
  padding: 20px 20px 10px 20px;
}

#item-wrapper {
  display: flex;
  padding: 10px;
}

#item-selector,
#item-viewer {
  margin: 0 10px;
}

#item-selector {
  display: flex;
  flex-direction: column;
  width: 250px;
  overflow-y: scroll;
}

#item-viewer {
  flex: 1;
  height: 50vh;
}

.item {
  border: 3px solid darkslateblue;
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
}

#item-viewer {
  border: 3px solid darkslateblue;
}
<nav>
  <h1>Header</h1>
</nav>
<main>
  <h2>Your items:</h2>
  <div id="item-wrapper">
    <div id="item-selector">
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
    </div>
    <div id="item-viewer">
      <p style="padding: 10px;">Select an item on the left to view more information</p>
    </div>
  </div>
</main>

我希望左边的可滚动div不超过窗口的高度。我试过将<body>和<html>的高度设置为100vh，并将overflow: auto和overflow: hidden添加到body、html、#item-wrapper和#item-selector，但这些都不起作用。如果我给出#item-selector和显式高度，那么它就起作用了。但我希望它填充窗口高度的剩余部分，所以这并不理想。我希望#item-selector不超过页面的高度，并在其内容超过高度时滚动。

css

2条答案

按热度按时间
00jrzges

00jrzges1#

您必须将height设置应用于 * 所有 * 父元素，因此html、body和#item-selector得到height: 100%;，并且main必须得到一个计算的高度值，该高度值从100%中减去nav和h2元素的高度。height: calc(100% - 130px);将大致执行以下代码片段中的操作：但是您要么必须为nav和h2定义精确的高度设置，要么使用javascript获得它们的实际高度。

* {
  margin: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  height: 100%;
}

nav {
  background-color: darkslateblue;
  color: white;
  padding: 20px;
}
main {
  height: calc(100% - 130px);

}
main h2 {
  padding: 20px 20px 10px 20px;
}

#item-wrapper {
  display: flex;
  padding: 10px;
  height: 100%;
}

#item-selector,
#item-viewer {
  margin: 0 10px;
}

#item-selector {
  display: flex;
  flex-direction: column;
  width: 250px;
  overflow-y: scroll;
  height: 100%;
}

#item-viewer {
  flex: 1;
  height: 50vh;
}

.item {
  border: 3px solid darkslateblue;
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
}

#item-viewer {
  border: 3px solid darkslateblue;
}
<nav>
  <h1>Header</h1>
</nav>
<main>
  <h2>Your items:</h2>
  <div id="item-wrapper">
    <div id="item-selector">
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
    </div>
    <div id="item-viewer">
      <p style="padding: 10px;">Select an item on the left to view more information</p>
    </div>
  </div>
</main>
赞(0）分享  回复(0）举报  2023-01-10
iyzzxitl

iyzzxitl2#

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

nav {
  background-color: darkslateblue;
  color: white;
  padding: 20px;
  height: 10vh;
}

main h2 {
  padding: 5px 20px 20px 20px;
}

#item-wrapper {
  display: flex;
  padding: 10px;
  height:85vh;
}

#itemHeaderWrapper{
  height:5vh;
}

#item-selector,
#item-viewer {
  margin: 0 10px;
}

#item-selector {
  display: flex;
  flex-direction: column;
  width: 250px;
  overflow-y: scroll;
}

#item-viewer {
  flex: 1;
  height: 50vh;
}

.item {
  border: 3px solid darkslateblue;
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
}

#item-viewer {
  border: 3px solid darkslateblue;
}
<nav>
  <h1>Header</h1>
</nav>
<main>
  <div id='itemHeaderWrapper'>
    <h2>Your items:</h2>
  </div>
  <div id="item-wrapper">
    <div id="item-selector">
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
    </div>
    <div id="item-viewer">
      <p style="padding: 10px;">Select an item on the left to view more information</p>
    </div>
  </div>
</main>

在这段代码中，我将h2标签 Package 在一个div中，id为'itemHeaderWrapper'，并将其预定义高度设置为5vh。我还将导航的高度设置为10vh。这意味着我可以强制左侧的可滚动div的高度为85vh，然后滚动。

赞(0）分享  回复(0）举报  2023-01-10
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com