如何用按鈕覆蓋div的所有高度？

Question

我有一個菜單，我必須用按鈕來覆蓋所有的div高度。我真的需要按鈕，因爲它的功能（我可以禁用它從CSS或JS例如）。所以，假設你有一個可調整大小的菜單（嘗試調整窗口大小in the fiddle），它可以有不同的高度值。

<div id="header-menu"> 
    <div id="header-back-button" onclick="alert('click')"> 
     <button id="back-button">Back</button> 
    </div> 
    <div id="header-title"> 
     <h1>This is my so so so long title</h1> 
    </div> 
    <div id="header-next-button"> 
     <button id="next-button"> 
      <img id = "imgMenu" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png"></img> 
    </button> 
</div> 

這裏是CSS：

#header-menu{ 
    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; 
} 
button { 
    background: red; 
    border: 0px; 
    height:100%; 
    width:100%; 
} 
#imgMenu{ 
    width: 100%; 
    height: 100%; 
} 

你能HEL我嗎？

Answer 1

你的CSS改成這樣：

#header-menu { 
    display: table; 
    width:100% 
} 
#header-back-button { 
    display: table-cell; 
    width: 15%; 
    min-width: 30px; 
    height: 100%; 
    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; 
    background: none repeat scroll 0% 0% #FFA500; 
    padding: 0px !important; 
    vertical-align: top; 
} 
button { 
    background: none repeat scroll 0% 0% #F00; 
    border: 0px none; 
    width: 100%; 
    min-height: 100%; 
    margin: 0px !important; 
} 
#imgMenu { 
    width: 100%; 
    height: 100%; 
} 

see updated fiddle here