Question

我的网络应用程序的固定菜单出现问题。我希望在页面顶部有一个固定的菜单，中间标题，每侧有两个按钮：后退和下一个。

enter image description here

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

问题是我真的需要我的网站响应，所以当我调整窗口大小时，它必须重新调整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

仅举几个其他选项，您可以：

将标题显示为表格。 http://jsfiddle.net/5bavL6s4/
使用flexbox：http://jsfiddle.net/ezj55frk/
使用javascript设置后退/下一个按钮的高度。 http://jsfiddle.net/zsLm1yvb/

$('#header-back-button, #header-next-button').height($('#header-title').height());
使用'white-space：no-wrap;'强制一行标题和'文字溢出：elipsis;'你的H1。
更改您的设计。：P

就个人而言，我会选择改变设计，以便能够默认适合两行。通过明确设置标题和按钮的高度。

显示为表格很简单，但您将违反"don't use tables as layout"-sentiment。

Flexbox很酷，但缺乏浏览器支持。

Answer 3

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

Answer 4

将overflow:hidden;添加到#header课程，并将其添加到每个列的课程中：

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

此外，我认为您需要从display: inline;课程中删除#header。

<强> Check JSFiddle Demo

带有HTML + CSS的相同高度3列菜单

4 个答案: