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%;
}

你能帮我吗？

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

如何用按钮覆盖div的所有高度？

1 个答案: