Question

我正在尝试使用以下元素组合网页布局： 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我有一些问题：

管理员登录时，“CMS-Admin-Bar”涵盖了我的“功能窗格”。
“功能窗格”右侧283px被切断。我需要这个固定的div适合屏幕，同时仍然有流畅的宽度。

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

亚历

Answer 1

请查看此内容：http://codepen.io/anon/pen/kEhny 再次更新

管理员登录后，“CMS-Admin-Bar”会覆盖我的“功能窗格”。 您需要找到CMS-Admin-Bar的高度并向父元素添加填充（可能是这种情况下的主体）或向总包装元素添加上边距。

“功能窗格”右侧283px被切断。我需要这个固定的div适合屏幕，同时还有流畅的宽度。 它似乎现在在笔中工作。请注意，这种布局确实没有响应。

CSS定位 - 两列Div布局，带有两个固定的顶部DIV

1 个答案: