固定標題不會遵循頁面寬度

Question

我正在構建一個響應式站點的框架，該站點在頁面的右側和左側都有一個固定的標題和25px填充。 我沒有遇到內容的填充或寬度問題，但是當顯示太小時，固定標題會在瀏覽器的右側運行。 我希望標題遵循與頁面其余部分相同的規則和設計，並始終顯示25px填充，除非顯示比我的最小寬度窄。

任何幫助，將不勝感激。 這看起來很簡單，但我把頭發拉了出來。

CSS：

#main {
    padding: 0 0px 0 25px;
    min-width: 725px;
    max-width: 1000px;
    margin: 0 auto;
}

#page {
    padding: 0 25px 0 25px;
    display: block;
    margin: 0 auto;
    max-width: 1000px;
    min-width: 725px;
    position: relative;
}

ul#header-nav {
    margin: 33px 0px 0 0px;
    list-style:none;
    width:500px;
    font-family: "ss-bol", Helvetica, Arial, sans-serif;
    overflow: hidden;
}

ul#header-nav li a {
    text-decoration:none;
    padding-left: 30px;
    color:#000000;
    float:left;
    text-align: right;
    display:inline;
}

#container {
    padding-top: 100px;
    left: 0;
    height: 100%;
}

#header-main {
width: 100%;
margin: 0 -25px 0 0px;
}

#header-frame {
z-index: 10;
    background-color: #c9dcb1;
    float: right;
}

#header-box {
    width: 100%;
    max-width: 1000px;
    min-width: 725px;
    padding-left: -25px;
    height: 100px;
    background-color: #ffffff;
    margin:0px;
    position: fixed;
    background-color: #c9dcb1;
z-index: 11;
}

#content {
padding-top: 100px;
width: 100%;
background-color: #75efe8;
}

HTML：

<body>
    <!-- BeginHeader -->
    <div id="page" class="clearfix heed">
        <div id="header-main">
        <div id="header-box">
            <div id="header-frame">
                <ul id="header-nav">
                    <li><a href="#">NEW</a></li>
                    <li><a href="#">SHOP</a></li>
                    <li><a href="#">WINE</a></li>
                    <li><a href="#">BLOG</a></li>
                    <li><a href="#">LOOKBOOK</a></li>
                    <li><a href="#">ABOUT</a></li>
                </ul> 
            </div>
        </div>
    </div>
        <div id="content">
            TEST CONTENT TEXT
        </div>
    </div>
</body>

Answer 1

填充，邊距和邊框將添加到元素的內容中。 所以，當你的顯示器很小時，通過告訴max-width: 1000px 1000px，你會因為填充而暗示1050px。

簡單的解決方案是將此左右設置的width: 100%替換為0，並將內部內容置於中心位置。

<div id="header-box">
    <div class="inner">header</div>
</div>

#header-box {
    max-width: 1000px;
    min-width: 725px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}
#header-box .inner {
    max-width: 1000px;
    margin: 0 auto;
}

Answer 2

西蒙，我采用了你的方法的基礎知識並擴展它以獲得我需要的東西。

這是最終的CSS：

#header-wrapper {
    padding: 0;
    margin: 0;
}

#header {
    position: fixed;
    width: 100%;
    min-width: 800px;
    height: 100px;
    z-index: 9;
    background-color: #ffffff;
}

#header .inner {
    margin: 0 auto;
    padding: 0 25px 0 25px;
    max-width: 1000px;
    height: 100px;
    z-index: 10;
    background-color: #ffffff;
}

ul#header-nav {
    margin: 58px -20px 0 0px;
    list-style: none;
    width: 500px;
    font-family: "ss-bol", Helvetica, Arial, sans-serif;
    font-size: 14px;
    overflow: hidden;
}

ul#header-nav li a {
    text-decoration: none;
    padding-left: 30px;
    color: #000000;
    float: left;
    text-align: right;
    display: inline;
}

和HTML：

<div id="header-wrapper">
<div id="header">
    <div class="inner">
        <div class="right">
        <ul id="header-nav">
        <li><a href="#">NEW</a></li>
        <li><a href="#">SHOP</a></li>
        <li><a href="#">WINE</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">LOOKBOOK</a></li>
        <li><a href="#">ABOUT</a></li>
        </ul>
        </div>
    </div>
</div>

再次感謝！

固定標題不會遵循頁面寬度

問題描述

2 個解決方案

解決方案1
4 2012-09-29 18:12:31

解決方案2
-1 已采納 2012-09-30 23:20:03

固定標題不會遵循頁面寬度

問題描述

2 個解決方案

解決方案1 4 2012-09-29 18:12:31

解決方案2 -1 已采納 2012-09-30 23:20:03

解決方案1
4 2012-09-29 18:12:31

解決方案2
-1 已采納 2012-09-30 23:20:03