Question

我试图实现固定位置标题栏。但是，当我尝试将窗口调整为较小的宽度时，标题的右侧部分未显示。如果我将位置更改为绝对，问题已解决，但我失去了标题栏的固定效果..

#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

Answer 1

前一段时间我遇到了同样的问题。看看我在那里的老帖子 - ＆gt; Make Fixed Header Scroll Horizontal

你可以使用jQuery或Javascript重新定位页面顶部的div（有时会导致一些滞后效应）

Answer 2

是的，我已经解决了你的问题。在处理调整窗口大小时，您必须为min-width部分添加#header css属性。

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

希望，它会帮助你。干杯。！将其标记为答案，如果它可以帮助您，以便其他人可以解决同样的问题。谢谢。 !!

固定位置标题栏问题

2 个答案: