菜单栏的一部分问题在调整大小时消失

Question

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

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

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

该div（#header）的代码是：

 #header {
    background-color: #dcdcdc;
    border-bottom: 1px solid #e6e6e6;
    padding: 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>

编辑：11/1/2013 Firefox屏幕截图：

我在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/