帶有滾動柔性面板的CSS佈局

Question

我想要構建一個簡單的僅限CSS佈局並且有很多麻煩：

我想要3個垂直面板。頂部面板 - '橫幅' - 保持固定在外部容器的頂部。它的高度應該由其內容決定 - 我不想要特定的或基於百分比的高度。如果我增加字體大小或插入更大的圖片，橫幅的高度應相應更改，下面的面板也應相應更改高度。

中間面板 - 「可選」 - 包含一些內容也可能增大或縮小（如此反覆，沒有具體或百分比高度），有時我可以隱藏或刪除中間面板。對中間面板的更改應該會影響底部面板的高度，但不會影響橫幅。

底部面板 - '彈性' - 應固定在容器的底部並向上生長。如果可以在當前高度顯示更多內容，則應顯示垂直滾動條。只有這個面板應該顯示滾動條 - 我不希望他們在其他面板或外部容器上。如果「可選」面板縮小或隱藏，則「靈活」面板的頂部應向上移動，僅在沒有更多內部內容可顯示的情況下停止。

這是我的素描。當顯示可選元素，柔性元件應該得到一個垂直滾動條：

$(function() { 
 
    $('a').click(function() { 
 
    $('.optional').toggle(); 
 
    return false; 
 
    }); 
 
});

div, h1, p { margin: 0; padding: 5px; position: relative; } 
 
h1 a { 
 
    font: .5em sans-serif; 
 
} 
 

 
.container { 
 
    outline: 1px solid pink; 
 
    height: 420px; 
 
    overflow: hidden; 
 
} 
 
.banner { 
 
    outline: 1px solid blue; 
 
} 
 
.optional { 
 
    outline: 1px solid orange; 
 
} 
 
.flexible { 
 
    outline: 1px solid lime; 
 
    min-height: 25%; 
 
    overflow-y: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row banner"> 
 
    <h1>Hello world <a href="#">toggle optional</a></h1> 
 
    </div> 
 
    <div class="row optional"> 
 
    <p>Optional 1</p> 
 
    <p>Optional 2</p> 
 
    <p>Optional 3</p> 
 
    <p>Optional 4</p> 
 
    <p>Optional 5</p> 
 
    </div> 
 
    <div class="row flexible"> 
 
    <p>flex01</p> 
 
    <p>flex02</p> 
 
    <p>flex03</p> 
 
    <p>flex04</p> 
 
    <p>flex05</p> 
 
    <p>flex06</p> 
 
    <p>flex07</p> 
 
    <p>flex08</p> 
 
    <p>flex09</p> 
 
    <p>flex10</p> 
 
    </div> 
 
</div>

我有一個非常很難得到這個只用CSS來工作。我一直在各種組合中使用相對和絕對定位，但他們想知道元素的高度，高度是動態的。我用flexbox玩了一下，但無法進行垂直擴展。

我可以使用各種JavaScript - 當文檔加載或窗口大小發生變化時，獲取外容器的高度，獲取橫幅和可選面板的計算高度，並將彈性面板的高度設置爲containerHeight - （bannerHeight + optionalHeight）。但如果可能的話，我想避免使用JS。僅限現代瀏覽器 - IE10 +，Chrome/Safari/FF current，iOS，Android。

可能嗎？

Answer 1

如果您可以使用flex屬性，您可以實現此功能（僅適用於年輕瀏覽器）。 對於較老的瀏覽器，您仍然需要使用javascript將生存高度設置爲.optionnal & .flexible，除非您允許.container增長。

$(function() { 
 
    $('a').click(function() { 
 
    $('.optional').toggle(); 
 
    return false; 
 
    }); 
 
});

div, 
 
h1, 
 
p { 
 
    margin: 0; 
 
    padding: 5px; 
 
    position: relative; 
 
} 
 
h1 a { 
 
    font: .5em sans-serif; 
 
} 
 
.container { 
 
    outline: 1px solid pink; 
 
    height: 420px; 
 
    overflow: hidden; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.banner { 
 
    outline: 1px solid blue; 
 
} 
 
.optional { 
 
    outline: 1px solid orange; 
 
    flex: 1; 
 
} 
 
.flexible { 
 
    outline: 1px solid lime; 
 
    overflow-y: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row banner"> 
 
    <h1>Hello world <a href="#">toggle optional</a></h1> 
 
    </div> 
 
    <div class="row optional"> 
 
    <p>Optional 1</p> 
 
    <p>Optional 2</p> 
 
    <p>Optional 3</p> 
 
    <p>Optional 4</p> 
 
    <p>Optional 5</p> 
 
    </div> 
 
    <div class="row flexible"> 
 
    <p>flex01</p> 
 
    <p>flex02</p> 
 
    <p>flex03</p> 
 
    <p>flex04</p> 
 
    <p>flex05</p> 
 
    <p>flex06</p> 
 
    <p>flex07</p> 
 
    <p>flex08</p> 
 
    <p>flex09</p> 
 
    <p>flex10</p> 
 
    </div> 
 
</div>

---

codepen to play with（測試與更多的內容到optionnal）