0

固定位置ヘッダーバーを実装してみました。しかし、ウィンドウのサイズをより狭い幅に変更しようとすると、ヘッダーの右側が表示されません。位置を絶対に変更すると、問題は解決しますが、ヘッダーバーの固定効果が失われます。

#header {
position: fixed;
top: 0px;
display: block;
height:56px;
width: 100%;
padding-left: 0px;
background-color: #333333;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 99999;
}

これがhtmlです。

<body>
  <div id="mask"></div>
  <div id="wrapper">
    <div id="header">
        <div id="center">
            <a id="logoWrapper" href="/makale"><div id="logo"></div></a>
            <div id="categoryWrapper">

                <ul>
                   <li>...</li>
                   <li>...</li>
                 </ul>

            </div>
            <div id="searchWrapper">
                <div id="search">
                    <input type="text" />
                    <a id="searchBt" href="#"><img src="/images/site/search.png"></a>
                </div>

            </div>
        </div>
    </div>
    <div id="content">...</div>
  </div>
 </body>

ここにリンクがありますhttp://sporapp.com/makale

4

2 に答える 2

1

私はしばらく前に同じ問題を抱えていました。そこにある私の古い投稿を見てください->固定ヘッダーを水平にスクロールさせる

jQueryまたはJavascriptを使用して、ページの上部にdivを再配置できます（遅延効果が発生する場合があります）

于 2012-10-29T10:43:16.347 に答える
0

こんにちは、私はあなたの問題を修正しました。ウィンドウのサイズ変更作業中に、部分min-widthにcssのプロパティを追加する必要があります。#header

CSS:

#wrapper
{
background-color: #F4F4F4;
display: block;
height: auto;
min-height:100%;
min-width:980px;
overflow:auto;
width: 100%;
}

#header 
{
backgroung-color: #333333;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
display: block;
height: 56px;
min-width: 1265px; // Here, if you want to adjust your min-width of header as per your need (for that you can use fire bug) else remains same
padding-left:0;
position: absolute;
top: 0;
z-index: 99999;
}

#header #center
{
margin: 0 auto;
width:980px;
}

願わくば、それはあなたを助けるでしょう。乾杯。!! 他の人が同じ問題を解決できるように役立つ場合は、回答としてマークしてください。ありがとう。!!

于 2012-10-29T10:49:22.393 に答える