收縮老二總是適合父母

假設我們有下面的標記收縮老二總是適合父母

<div id="parent"> 
    <div id="header"> 
    </div> 
    <div id="content"> 
    </div> 
</div>

header DIV是大小可變的，所以我們不知道什麼確切的偏移得到第二個。我們要完成以下兩個目標：

第二個div永遠不應該溢出其父項。如果發生溢出，則會出現滾動條。
它應該以純CSS的方式完成，如果可能的話，IE9 +。

我一直在想，這個任務是很容易的，真的，我只想我的div是非四溢，這一切，但我發現，這是不可能的，即使Flexbox的。

當我說overflow我的意思是垂直溢出，因爲它們都是相同的寬度。

來源

2016-11-29 Alex Zhukovskiy

母體的高度被定義？它是整個視口高度嗎？ – fcalderan

'#parent { \t display：inline-table; } #header，＃content { \t display：table-row; }' – Banzay

@Banzay抱歉它不起作用。 –

用Flexbox這樣做很簡單，只需在父母上設置flex-direction: column，然後在content上設置overflow-y: auto。

#parent { 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 200px; 
 
} 
 
#header { 
 
    background: lightblue; 
 
} 
 
#content { 
 
    flex: 1; 
 
    overflow-y: auto; 
 
    background: lightgreen; 
 
}

<div id="parent"> 
 
    <div id="header"><br><br><br></div> 
 
    <div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque culpa consequuntur repellat ex, ut cumque fugit minus, itaque omnis, cum quidem in debitis. Consequuntur perspiciatis corporis nostrum similique eveniet voluptates cumque molestias rerum, distinctio accusamus? Quas explicabo, ea praesentium ad velit rem accusamus officia quibusdam ut accusantium possimus dignissimos dolores ipsum quia placeat tenetur omnis veritatis molestias voluptatibus consequuntur odit consectetur vero, voluptas corporis laudantium! Rem laborum excepturi quia temporibus, veniam blanditiis tempore eaque nostrum suscipit, quam laboriosam ratione provident obcaecati iste magni molestiae explicabo quibusdam expedita veritatis officia, debitis officiis sed. Neque veniam eius saepe. Quo doloremque, repellat mollitia!</div> 
 
</div>

來源

2016-11-29 16:21:45

而且IE9有可能嗎？無論如何，我將它標記爲答案，但我想知道是否有可能。 –

問題是，你不知道標題的高度，所以內容需要動態高度來獲取其餘的空閒空間，並且還需要'overflow-y：auto'。我不確定是否有其他方法可以在CSS中做到這一點，但可能會有。也許有一些表格。 –

我確實找到了IE9的解決方案：https：//blogs.msdn.microsoft.com/kurlak/2015/02/20/filling-the-remaining-height-of-a-container-while-handling-overflow-in -css-ie8-firefox-chrome-safari /。請將它添加到您的答案中。 –

收縮老二總是適合父母

回答

相關問題