css - 固定レイヤースクロール

Question

HTML:

<div id="wrap">
<div id="header">
<div class="logo"></div>
<div class="category"></div>
</div>
</div>

CSS:

#wrap { 
width:960px; 
margin:0 auto; 
position:relative; }


#header_wrap { 
position:fixed; 
top:0; 
left:0; 
width:100%; 
min-width:960px; 
height:105px; 
background:rgba(256, 256, 256, 0.6); z-index:999; }


#header {  
width:860px; 
position:relative;  
height:90px; 
padding:15px 40px 0 40px; 
margin:0 auto;  }

.logo { 
float:left; 
margin-top:-35px; }

.category { float:right; margin-top:-9px; }

ページの上部に固定ヘッダー メニューを作成しました。しかし、ブラウザウィンドウの幅がラップ幅よりも小さい場合 (特に、iphone/ipad でサファリをズームする場合)、ヘッダーの右側 (カテゴリ) が表示されない (固定)。ヘルプ！

Answer 1

'px'の形式で幅を指定しないで%ください。ブラウザーを最大化または最小化すると、スクロールバーが表示され、div が切り取られます。