如何將兩個垂直放置的位置放置在最頂端的剩餘高度？

標記是這樣的： -如何將兩個垂直放置的位置放置在最頂端的剩餘高度？

<div id="parent"> 
    <div class="top"> 
     <ul> 
      <li>... 
     </ul> 
    </div> 
    <div class="bottom"> 
     <ul> 
      <li>Option A 
      <li>Option B 
      <li>Option C 
     </ul> 
    </div> 
</div>

而CSS是： -

div { 
    border: 1px solid black; 
} 

#parent { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

.top { 
    max-height: 200px; 
    overflow: scroll; 
}

所以，基本上我想要的是bottomdiv應該觸摸窗口的下邊緣，剩下的空間應採取topdiv。我目前在topdiv中設置max-height的方法顯然不是很好，因爲基於屏幕大小（在手機上），它將不是太大就是太大。我可以使用CSS來實現嗎？

下面是這個的jsfiddle - 以位置 div.bottom 絕對並設置div.top 高度 100％http://jsfiddle.net/Ldr07h2r/

來源

2014-09-13 AppleGrew

這是非常簡單的Flexbox layout。在這種情況下，你不必指定一個明確的height的底部<div>，最上面的一個會採取的剩餘空間：

EXAMPLE HERE

#parent { 
    /* other declarations... */ 

    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 

.top { 
    overflow: auto; /* Up to you! */ 
    flex: 1; 
}

對這些屬性一看：

來源

2014-09-13 09:40:49

感謝這是我需要的。 – AppleGrew 2014-09-13 13:06:26

有一個問題。爲什麼使用'100vh'而不是'100％'？ – AppleGrew 2014-09-13 20:17:18

@AppleGrew通常，「高度」的百分比值是相對於盒子的包含塊的高度而言的，該高度可能與視口的高度無關;但通過使用'vh'視口百分比長度，元素肯定會佔用視口的高度。然而，在「＃父母」絕對定位的這種特殊情況下 - 即'fixed' - ，我們可以避免使用'height'和/或'min-height'屬性，而不是使用'top：0; bottom：0;'聲明使它佔據視口的整個高度：** [Updated Demo]（http://jsfiddle.net/hashem/Ldr07h2r/7/）**。 – 2014-09-13 21:37:52

你 - div.bottom。

您最終的CSS必須是：

div { 
    border: 1px solid black; 
} 

#parent { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

.top { 
    height: calc(100% - 100px); 
    overflow: scroll; 
} 
.bottom { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 100px; 
}

這裏是更新的小提琴：http://jsfiddle.net/Ldr07h2r/4/

祝您好運！

來源

2014-09-13 09:35:47 emmanuel

如果他不想要固定大小的底部分？ – Richa 2014-09-13 09:39:09

我不知道該怎麼辦，請隨時編輯我的帖子。 – emmanuel 2014-09-13 09:42:43

謝謝，但在其他語言文本可以包裝到另一行，所以我不能設置一個固定的高度。 +1提供的解決方案，可以在IE8和9中爲需要支持它們的不幸靈魂工作。 – AppleGrew 2014-09-13 13:13:01

這裏是一個小祕密：只要使用漸變父元素......

#parent {background: linear-gradient(to right, rgba(238, 238, 238, 0) calc(100% - 370px), rgba(238, 238, 238, 1) calc(100% - 360px)) repeat scroll 0 0 rgba(0, 0, 0, 0);}

...你就不必改寫你的代碼爲height相關的黑客。

來源

2014-09-13 10:13:40 John

如何將兩個垂直放置的位置放置在最頂端的剩餘高度？

回答

相關問題