與HTML + CSS相同的高度3列菜單

Question

我遇到了我的web應用程序的固定菜單問題。我想在我的頁面頂部有一個固定菜單，中間有一個標題，每邊有兩個按鈕：上一個和下一個。

<div id="header"> 
    <div id="header-back-button">Ac1</div> 
    <div id="header-title"> 
     <h1>This is my so so so long title</h1></div> 
    <div id="header-next-button">Ac2</div> 
</div> 

#header{ 
    display: inline; 
} 
#header-back-button{ 
    float: left; 
    width: 15%; 
    min-width: 30px; 
    height: 25px; 
    background: orange; 
} 
#header-title { 
    float: left; 
    width: 70%; 
    min-width: 40px; 
    background: yellow; 
} 
#header-next-button { 
    float: right; 
    width: 15%; 
    min-width: 30px; 
    height: 25px; 
    background: orange; 
} 

的問題是我真的需要我的網站是有求必應，所以當我調整窗口的大小它必須rezise的DOM元素。當我有一個很長的冠軍時，這個div成了兩條線，所覆蓋的空間是雙倍。這樣的事情沒有問題，除了其他div沒有被調整大小。那麼，我該如何調整這些div？

非常感謝！

http://jsfiddle.net/x7dsLkoe/7/

Answer 1

很容易。改變你的CSS是這樣的：

#header { 
    display: table; 
    width:100% 
} 
#header-back-button { 
    display: table-cell; 
    width: 15%; 
    min-width: 30px; 
    height: 25px; 
    background: orange; 
} 
#header-title { 
    display: table-cell; 
    width: 70%; 
    min-width: 40px; 
    background: yellow; 
} 
#header-next-button { 
    display: table-cell; 
    width: 15%; 
    min-width: 30px; 
    height: 25px; 
    background: orange; 
} 

see fiddle here

Answer 2

添加overflow:hidden;到#header類和它添加到每一列的類：

margin-bottom: -99999px; 
padding-bottom: 99999px; 

此外，我認爲你需要從#header類中刪除display: inline;。

Check JSFiddle Demo

Answer 3

只是爲了一些其他選項，您可以：

• 顯示標題爲表。 http://jsfiddle.net/5bavL6s4/
• 使用flexbox：http://jsfiddle.net/ezj55frk/

• 使用javascript設置背部/下一個按鈕的高度。 http://jsfiddle.net/zsLm1yvb/

  $('#header-back-button, #header-next-button').height($('#header-title').height());

• 力一個標題 '白色空間：無包裝;'和'text-overflow：elipsis;'在你的H1上。

• 更改您的設計。 ：P

就我個人而言，我會選擇改變設計，以便能夠在默認情況下適合兩條線。通過明確設置標題和按鈕的高度。

以表格形式顯示很容易，但是您會違背"don't use tables as layout"-sentiment。

Flexbox很酷，但缺乏瀏覽器支持。

Answer 4

你也可以使用display: table-cell;。 Here's a jsfiddle variation。