固定css菜单不要溢出内容

时间:2014-04-01 15:20:37

标签: html css wordpress css3

我对网页进行了以下设置:

website sketch

我想要在右侧边栏中显示一个菜单,但是如果我使用固定定位,则不同的设备和屏幕尺寸会让我的内容和我的侧边栏发生碰撞......

如何在wordpress主题中设置div或其他内容以使其成为可能?

目前我有

<header>
4x <div></div>
</header>
<content>
</content>
<aside>
<nav>
</nav>
</aside>
<footer>
</footer>

使用CSS:

#header {
display:block;
background-color:inherit;
width:1024px;
}

#header div{
display:inline-block;
}

#headermenuAKAtheFIRSTdivOFtheHEADER {
margin: 15px 15px 15px 15px;
width:134px;
height:134px;
float:left;
background-color:#fff;
} 
#footer {
margin: 4px 0 35px 184px;
padding:10px;
width:667px;
border: solid 1px #9a7283;
background-color:#fff;
}

aside {
width: 164px;
height:164px;
margin-right:5px;
position: fixed;
top:241px;
left:35px;
border: solid 1px #9a7283;
background-color:#fff;
}

2 个答案:

答案 0 :(得分:0)

似乎只能使用CSS来粘贴菜单。

我选择了一个小的JAVASCRIPT动作并集成了这个动作,就像一个魅力:http://www.jtricks.com/javascript/navigation/floating.html

感谢您的帮助!

答案 1 :(得分:0)

在我看来,你想知道如何定位它。

您可以将侧边栏设置为固定,并为内容指定边距,例如200像素。这将使内容在右侧保持200px的空间。

#content {
    margin-right: 100px;
    border: dotted 1px red;
}
#sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 90px;
    border: dashed 1px green;
}

工作样本:http://jsfiddle.net/BZ7Sr/1/