我被困在这里。我不能完全弄清楚正确的语法来让我的网站布局完全正确。
我试图有一个固定宽度为 100% 高度的侧面导航,然后是一个固定高度为 100% 宽度的顶部导航,最后我希望我的内容占据剩余空间并具有独立滚动。
我遇到的问题是内容滚动条与 topNav 栏重叠。
我目前的 CSS 设置如下:
body
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.sideNav
{
width: 100px;
height: 100%;
float: right;
position: absolute;
top: 0;
left: 0;
background-color: green;
z-index: 3;
}
.topNav
{
width: 100%;
height: 65px;
background-color: gold;
float: right;
position: relative;
z-index: 2;
text-align: right;
}
.content
{
width: 100%;
height: 100%;
z-index: 1;
background-color: blue;
overflow-y: scroll;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
bottom: 0;
right: 0;
padding-left: 100px;
border: 2px red inset;
margin-top: 65px;
}
这是小提琴,因为我知道这听起来令人困惑:jsFiddle
如果还有什么我可以提供的,请告诉我。我已经用尽了所有的想法。