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 回答