难以在没有固定宽度或高度的嵌套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将始终垂直扩展以适应其内容，而不考虑宽度。