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，你会因为填充而暗示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 个答案: