带有标题的响应式菜单：有一个占用所有可用空间的调整大小的标题

Question

考虑这种情况：我有一个带有标题和菜单栏的页面，在同一行对齐。该网站是响应式的，我希望标题和菜单都具有最佳的可用宽度。

但是，菜单不应折叠，并且应始终占用所有可用空间。标题可以折叠，但应尽可能长地使用所有可用宽度。

这可能有点模糊，所以我在这里创建了一个 jQuery 解决方案：

http://cdpn.io/tBskv

尝试调整浏览器窗口的大小，使菜单与标题重叠以理解我的意思。

但是，我真的喜欢没有任何 Javascript 的 CSS 解决方案。最好它应该在 IE8 上运行，但如果有一个仅适用于现代浏览器的解决方案，我愿意做出一些妥协。

Answer 1

这实际上可以通过 CSS 实现，并且在 IE8 中适当地使用 display:table-cell 和 white-space:nowrap。我在

上发布了针对您的问题的 CSS 解决方案

http://codepen.io/anon/full/HhCFB

此解决方案允许右侧菜单永不折叠，左侧标题为全标题宽度，或在页面太小时折叠到可用宽度。

简而言之：

<div class="wrap">
    <span>a long example title</span>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

<style>
    .wrap {
        display: table;
    }

    span {
        display:table-cell;
    }

    ul {
        display: table-cell;
        white-space: nowrap;                   
    }

    li {
        display: inline-block;
        margin-right: 20px;
    }
</style>

display:table 和display:table-cell 确保标题和菜单都充当列，因此它们不会在彼此下方浮动。不让菜单崩溃的诀窍是在ul 上使用white-space:nowrap。现在，当页面变得太小时，标题将是唯一的换行符。

在上面提到的 codepen 解决方案链接中，还添加了一个变体，以确保标题跨度永远不会大于其内容的宽度。这样菜单也将坚持标题。只需注释掉.outer{ float:left }即可获得本答案中提到的代码解决方案。

你在找什么？

Answer 2

不幸的是，仅使用 CSS 是不可能的——如果你想使用 IE8 则不行。

您必须计算可用空间来填充其中的 div，而 calc() 的函数只适用于现代浏览器。

我创建了两个主题来搜索百分比容器的响应式解决方案，结果是here 和here。

JavaScript 的最终解决方案是这样的：

/** Centralize the main container **/
function calculateMainContainerWidth() {
    $realWidth = $(".main-container").width() - $(".right").outerWidth(),
    $containerContent = $(".left");
    $containerContent.css("width", $realWidth);
};

$(window).on("resize", function() {
    calculateMainContainerWidth();
});

calculateMainContainerWidth();

也可通过FiddleJS 获得。

希望对你有帮助。