難以在沒有固定寬度或高度的嵌套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將始終垂直擴展以適應其內容，而不考慮寬度。