固定的CSS菜單不溢出內容

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; 
}

來源

2014-04-01 Jahn Schlosser

你爲什麼這樣做'fixed'？你不能使用'左'和'右'嗎？ – Ani

我想要始終在屏幕上顯示導航。所以它應該停留在屏幕中間的位置。我可以用剩餘的浮點數實現這種粘性效果嗎？ –

好吧，Ani，你能解釋一下使用哪個CSS功能嗎？ –

這似乎是不可能有一個棘手的菜單隻能用CSS。

我選擇做一些JavaScript動作和整合這一塊，就像一個魅力：http://www.jtricks.com/javascript/navigation/floating.html

感謝您的幫助！

來源

2014-04-04 13:58:48

在我看來，你想知道如何定位它。

您可以將邊欄設置爲固定，併爲內容提供例如邊距的右邊距。 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/

來源

2014-04-04 14:18:31 ANeves

固定的CSS菜單不溢出內容

回答

相關問題