很难在没有固定宽度或高度的嵌套 div 中显示滚动条

Question

我有一个 div，它位于另一个 div 中，并且没有一个元素具有固定的宽度或高度。中心 div (class:page-detail-left-content) 应该随着窗口大小的变化而灵活，但需要有一个最小宽度并在适当的时候显示一个滚动条。

有什么建议吗？

.page-detail {
  height: 100%;
}

.page-detail-with-filter {
  margin-left: 240px;
}

.page-detail-right {
  float: right;
  width: 240px;
  height: 100%;
  z-index: 999;
  background: green;
}

.page-detail-left {
  height: 100%;
  margin-right: 240px;
  background: lightblue;
}

.page-detail-left-main-content {
  bottom: 90px;
  position: absolute;
  top: 190px;
  overflow: scroll;
  right: 240px;
  min-width: 800px;
  left: 10px;
}

.page-detail-bottom {
  width: 100%;
  height: 90px;
  border-top: 1px solid lightgray;
  right: 240px;
  bottom: 0px;
  position: absolute;
  z-index: -10;
}

.filterSelection {
  height: 100%;
}

<div class='filterSelection'>
  <div class='page-detail-right'>
    RIGHT
  </div>
  <div class='page-detail-left'>
    <div style="height:100%;">
      <div style="height:80px;">
        header
      </div>
      <div style="border-top:1px solid; border-bottom:1px solid;height:50px;" class="gray2">
        header2
      </div>
      <div class="page-detail-left-main-content">
        dskhfjkajf ajsdhfjk asdfhah sdfha sdfhaskdhf kjahsdjkfh ajsdhf asdkjfhakjsdh fkjh askdj fhjaksdhfj ahsdjfkh asjkfhdajskh fdjkhsdf sdfjkasdfh ajkdhfjka hdjkhafkjsh kjfhashdkfj hsjdhf hdsfak jhdfa shdfajkhsdf adhf akdsjhfkajhd sfkjahsdkjf haksjdhfasdf adf
        dsfjadjkfhak sdhfkjashdfjk adhfa hdfh
      </div>
      <div class="page-detail-bottom">
        bottom bar
      </div>
    </div>
  </div>
</div>

Answer 1

你可以尝试用这个替换你的 CSS 吗？它使用 @media 查询，它在 CSS 中定义条件规则。在这种情况下，当窗口的宽度小于 1000px 时，.page-detail-left-main-content 将被赋予overflow: scroll。

.page-detail {
  height: 100%;
}

.page-detail-with-filter {
  margin-left: 240px;
}

.page-detail-right {
  float: right;
  width: 240px;
  height: 100%;
  z-index: 999;
  background: green;
}

.page-detail-left {
  height: 100%;
  margin-right: 240px;
  background: lightblue;
}

.page-detail-left-main-content {
  bottom: 90px;
  position: absolute;
  top: 190px;
  right: 240px;
  min-width: 800px;
  left: 10px;
}

@media (max-width: 1000px) {
  .page-detail-left-main-content {
    overflow: scroll;
    }
  }

<div class='filterSelection'>
  <div class='page-detail-right'>
    RIGHT
  </div>
  <div class='page-detail-left'>
    <div style="height:100%;">
      <div style="height:80px;">
        header
      </div>
      <div style="border-top:1px solid; border-bottom:1px solid;height:50px;" class="gray2">
        header2
      </div>
      <div class="page-detail-left-main-content">
        dskhfjkajf ajsdhfjk asdfhah sdfha sdfhaskdhf kjahsdjkfh ajsdhf asdkjfhakjsdh fkjh askdj fhjaksdhfj ahsdjfkh asjkfhdajskh fdjkhsdf sdfjkasdfh ajkdhfjka hdjkhafkjsh kjfhashdkfj hsjdhf hdsfak jhdfa shdfajkhsdf adhf akdsjhfkajhd sfkjahsdkjf haksjdhfasdf adf
        dsfjadjkfhak sdhfkjashdfjk adhfa hdfh
      </div>
      <div class="page-detail-bottom">
        bottom bar
      </div>
    </div>
  </div>
</div>

我有点不清楚何时需要滚动条。如果没有设置高度，div 将始终垂直扩展以适应其内容，而不管宽度如何。