html - 部分菜单栏在重新占用时消失的问题

Question

我有一个正在设计的网站，但在调整大小时遇到​​了问题。

这是我在 Chromium 28.0 中最大化时的网站： 您可以看到灰色的菜单栏一直延伸。

但是，当我去调整窗口大小时：

该 div (#header) 的代码是：

#标题{
    背景颜色：#dcdcdc；
    边框底部：1px 实心#e6e6e6；
    填充：27px 0；
}

所以没有设定宽度。

这是怎么回事？

编辑：2013 年 11 月 1 日 这是我的标题 HTML：

<div id="header">
        <div>
            <div class="logo">
                <a href="index.html">Thumbnails</a>
            </div>
            <ul id="navigation">
                <li class="active">
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="features.html">Features</a>
                </li>
                <li>
                    <a href="news.html">News</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
    </div>

编辑：2013 年 11 月 1 日火狐截图：

我添加了来自 Firefox 的屏幕截图，该问题也影响了页脚（也发生在 Chromium 中）

Answer 1

在简化了您的 html + css 之后，我想出了一个似乎可以按预期工作的解决方案。我相信问题在于您设置填充+边距的方式。

的HTML：

<div class="page-container">

    <header class="top-bar">
        <div class="inner">

            <h2 class="logo">Logo</h2>

            <ul class="main-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

        </div>
    </header>

    <section class="main-content"></section>

    <footer class="bottom-bar">
        <div class="inner">

            <span class="copyright">Copyright info here.</span>

            <span class="contact">Contact info here.</span>

        </div>
    </footer>

</div>

</body>

CSS：

body {
    margin: 0;
    padding: 0;
}

.page-container {
    margin: 0;
    padding: 0;
}



/* ===============================================
/* ====== HEADER + NAVIGATION STYLES
/* ============================================ */

.top-bar {
    background: #EEE;
    height: 100px;
    text-align: center;
}

.inner {
    background: #DDD;
    display: block;
    height: 100px;
    margin: 0 auto;
    width: 920px;
}

.logo {
    background: #CCC;
    display: block;
    float: left;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 35px 0;
    width: 120px;
}

.main-nav {
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 35px 0;
}

.main-nav li {
    display: block;
    float: left;
    width: 160px;
}

.main-nav li a {
    color: #999;
    font-size: 14px;
    text-decoration: none;
}

.main-nav li.active a,
.main-nav li a:hover {
    color: #F99600;
}



/* ===============================================
/* ====== MAIN CONTENT PLACEHOLDER STYLES
/* ============================================ */

.main-content {
    background: #F6F6F6;
    height: auto;
    margin: 0 auto;
    min-height: 500px;
    width: 920px;
}



/* ===============================================
/* ====== FOOTER ELEMENT STYLES
/* ============================================ */

.bottom-bar {
    background: #EEE;
    height: 100px;
}

.bottom-bar .copyright,
.bottom-bar .contact {
    display: block;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 35px;
}

.copyright { float: left; }
.contact { float: right; }

您可以在此处查看工作代码：http: //jsfiddle.net/onestepcreative/X8QbD/