1

我正在尝试将具有以下元素的网页布局组合在一起： 1. 左侧菜单和右侧主要内容的两列设置。2. 固定在右栏顶部的“功能栏”。固定且始终可见。

以下是渔获物：

  1. 如果它们的高度超过浏览器窗口分辨率，我希望这两列相互独立滚动
  2. 我使用的内容管理系统在页面顶部添加了一个固定窗格以显示控制选项

我制作了一个图像，可以直观地表示我所追求的布局。我希望这有助于理解。

供参考的布局图

这是我目前正在尝试创建此布局的地方

<div class="CMS-Admin-Bar"></div>
<div class="total-wrapper">
    <div class="left-pane">
        <div class="menu-pane"></div>
    </div>
    <div class="right-pane">
        <div class="Function-Pane"></div>
        <div class="Content-Pane"></div>
    </div>
</div>

.CMS-Admin-Bar{
position:fixed;
height:43px;
left:0;
top:0;
width:100%;
z-index:10;
}

.total-wrapper{
position:relative;
}

.left-pane{
position:absolute;
top:0;
bottom:0;
left:0;
height:100%;
width:283px;
z-index:8;
}

.right-pane{
position:fixed;
top:0;
left:283px;
right:0;
bottom:0;
overflow:auto;
}

.Function-Pane{
position:fixed;
z-index:8;
top:0px;
left:283px;
height:43px;
}

使用这个 CSS 我有一些问题：

  1. 当管理员登录时，“CMS-Admin-Bar”会覆盖我的“Function-Pane”。
  2. “功能窗格”的右侧 283px 正在被切断。我需要这个固定的 div 以适应屏幕，同时仍然具有流动的宽度。

我希望我的描述性足够。感谢您的帮助和时间！

亚历克斯

4

1 回答 1

0

看看这个：http : //codepen.io/anon/pen/kEhny 再次更新

当管理员登录时，“CMS-Admin-Bar”覆盖了我的“Function-Pane”。 您需要找到 CMS-Admin-Bar 的高度并向父元素添加填充（可能是这个的主体case) 或为 total-wrapper 元素添加上边距。

“功能窗格”的右侧 283px 正在被切断。我需要这个固定的 div 以适应屏幕，同时仍然具有流动的宽度。 似乎它现在可以在笔中使用。请注意，此布局确实没有响应。

于 2013-05-09T20:32:44.277 回答