CSS可變頂部固定底部已經幫了我

感謝您的關注，我做了一個具有菜單功能的web應用程序，其中有一個標題，說明，添加新組件的選項多個輸入字段）以及底部的保存或取消按鈕。標題沒有換行符，並且總是具有恆定的高度，對於按鈕欄來說是相同的，這些位於頂部和底部（示例中爲藍色和粉紅色），描述可以具有不同數量的行，因此高度是可變的（綠色區域）。輸入選項也可以有不同數量的行，但只能放在剩餘的容器區域中。所以，我有什麼是這樣的：CSS可變頂部固定底部已經幫了我

而我想有是這樣的：

凡綠地的高度是可變的，黃色的領域罷了剩下的空間有一個固定的標題和底部的按鈕。 Here is the fiddle（在問題後面粘貼的代碼）和一個JS函數，該函數生成1 - 5行描述（綠色字段）以模擬變化的高度。

我正在尋找一個純粹的CSS解決方案，並花了幾天的時間來研究這個問題。我嘗試過CSS位置，浮動和顯示命令，彈性框，表格佈局等的各種組合，但不幸的是無法將我的手指放在解決方案上。我知道所描述的here JavaScript的方法是可能的，但如果我這樣做，我會認爲它過於複雜，可能會混淆未來的編碼器工作的工具，我想提高我的知識。

由於提前，

詹姆斯

var EHeader = document.getElementById("desc"); 
 
var DescLine = "desc<br/>"; 
 
var DescLines = Math.floor(Math.random() * 5) + 1; 
 

 
EHeader.innerHTML = DescLine.repeat(DescLines);

#container { 
 
    position: absolute; 
 
    background-color: red; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
#title { 
 
    background-color: blue; 
 
} 
 
#desc { 
 
    background-color: green; 
 
} 
 
#options { 
 
    position: relative; 
 
    background-color: yellow; 
 
} 
 
#button { 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: 0px; 
 
    background-color: pink; 
 
}

<div id="container"> 
 
    <div id="title">title</div> 
 
    <div id="desc"></div> 
 
    <div id="input"> 
 
    <div id="options">option 0 
 
     <br/>option 1 
 
     <br/>option 2 
 
     <br/>option 3 
 
     <br/>option 4 
 
     <br/>option 5 
 
     <br/>option 6 
 
     <br/>option 7 
 
     <br/> 
 
    </div> 
 
    </div> 
 
    <div id="button">button bar</div> 
 
</div>

來源

2016-11-06 James Scott

所有你需要的是：

container元素上設置display: flex與flex-direction: column。
設置overflow-y: auto和flex: 1在flop元素上。

另外如果你想options或（黃格）始終採取的自由空間休息，即使有選項少數可以做THIS

var EHeader = document.getElementById("desc"); 
 
var DescLine = "desc<br/>"; 
 
var DescLines = Math.floor(Math.random() * 5) + 1; 
 

 
EHeader.innerHTML = DescLine.repeat(DescLines);

#container { 
 
    position: absolute; 
 
    background-color: red; 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
#flop { 
 
    overflow-y: auto; 
 
    flex: 1; 
 
} 
 
#title { 
 
    background-color: blue; 
 
} 
 
#desc { 
 
    background-color: green; 
 
} 
 
#options { 
 
    background-color: yellow; 
 
} 
 
#button { 
 
    background-color: pink; 
 
}

<div id="container"> 
 
    <div id="title">title</div> 
 
    <div id="desc"></div> 
 
    <div id="flop"> 
 
    <div id="options">option 0 
 
     <br/>option 1 
 
     <br/>option 2 
 
     <br/>option 3 
 
     <br/>option 4 
 
     <br/>option 5 
 
     <br/>option 6 
 
     <br/>option 7 
 
     <br/>option 8 
 
     <br/> 
 
    </div> 
 
    </div> 
 
    <div id="button">button bar</div> 
 
</div>

來源

2016-11-06 15:07:00

尼斯不知道彎曲可以像使用 –

內納德 - 。謝謝在這裏爲你的幫助，爲延遲答覆道歉，這是一個實施的鬥爭。將添加一個答案（接受你的）與一些指針爲那些f ollow。 –

對於當前的HTML，如果您打算使用br來分隔選項，那麼我可以建議將#options的高度設置爲等於文本的行高乘以您要顯示的行數的值，即lineHeight * totalLines

爲填充片段，我假設線高度爲20px。所以對於4個項目，高度是20 * 4 = 80px。

var EHeader = document.getElementById("desc"); 
 
var DescLine = "desc<br/>"; 
 
var DescLines = Math.floor(Math.random() * 5) + 1; 
 

 
EHeader.innerHTML = DescLine.repeat(DescLines);

#container { 
 
    position: absolute; 
 
    background-color: red; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
#title { 
 
    background-color: blue; 
 
} 
 
#desc { 
 
    background-color: green; 
 
} 
 
#options { 
 
    line-height: 20px; 
 
    height: 80px; 
 
    position: relative; 
 
    background-color: yellow; 
 
    overflow-y: scroll; 
 
} 
 
#button { 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: 0px; 
 
    background-color: pink; 
 
}

<div id="container"> 
 
    <div id="title">title</div> 
 
    <div id="desc"></div> 
 
    <div id="input"> 
 
    <div id="options">option 0 
 
     <br/>option 1 
 
     <br/>option 2 
 
     <br/>option 3 
 
     <br/>option 4 
 
     <br/>option 5 
 
     <br/>option 6 
 
     <br/>option 7 
 
     <br/> 
 
    </div> 
 
    </div> 
 
    <div id="button">button bar</div> 
 
</div>

來源

2016-11-06 15:08:16

料斗 - 感謝這裏的努力，最後我跟Nenads的方法去了 –

是的，那比我的好。我也從你的問題中學到了......歡呼聲 –

這裏只是進一步增加了反饋，任何人試圖在Chrome中實現這一點，如明確here：

這是好的，除了Chrome的所有瀏覽器，肚裏完全對消失的內容，重疊的內容和巨大的空間（屏幕截圖）不滿。不知怎的，一個箱子裏的花車在整個頁面的其餘部分都扔出了手榴彈。

爲了讓Chrome可以很好地播放，有必要從子標記中刪除所有float: left CSS標記。該問題中給出的代碼示例是一個最小的示例，實際上Flex框內的子元素更復雜。使用Nenads指針我能夠得到描述的底部和菜單部分的頂部，以滿足適當的擴展，但必須在可滾動區域內的子元素上使用虛擬邊距（使用first-child和last-childcss標記在介紹（上）和按鈕欄（如下圖）創建邊界的空間

問候，

詹姆斯

來源

2016-11-10 21:30:36

CSS可變頂部固定底部已經幫了我

回答

相關問題