用绝对位置定义流体宽度

Question

我正在尝试设计一个带有固定侧面板和滚动内容区域的网站。侧面板将保持品牌和主导航 - 我希望它保持固定，以便导航栏始终可见。我希望菜单项上的悬停效果到达内容区域。目前他们因为位置绝对而溢出。我知道分配它会使它脱离文档流程。

This is a very rough mock up

我知道如果我在左侧面板和ul上定义宽度，我可以解决这个问题，但网站需要响应，所以我真的需要保持这种流畅。

有什么建议吗？

Answer 1

以下是您可以做的事情：

header {
    width: 25%;
    float: left;
    display: inline-block;
}

section {
    float: left;
    width: 75%;
    background: white;
    padding: 0 2em;
    display: inline-block;
}