1

我正在为响应式网站构建框架，该网站在页面的左右两侧都有固定的标题和 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>

4

2 回答 2

4

填充、边距和边框被添加到元素的 with 中。因此，当您的显示很小时，通过告诉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;
}
于 2012-09-29T18:12:31.413 回答
-1

西蒙，我采用了您方法的基础知识并对其进行了扩展以获得我需要的东西。

这是最终的 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>

再次感谢！

于 2012-09-30T23:20:03.897 回答