html - サイズ変更時にメニュー バーの一部が消える問題

Question

設計中の Web サイトがあり、サイズ変更で問題が発生しました。

Chromium 28.0 で最大化したときの私の Web サイトは次のとおり です。灰色のメニュー バーがずっと伸びているのがわかります。

ただし、ウィンドウのサイズを変更すると、次のようになります。

その div (#header) のコードは次のとおりです。

#ヘッダー {
    背景色: #dcdcdc;
    ボーダーボトム: 1px ソリッド #e6e6e6;
    パディング: 27px 0;
}

そのため、幅の設定はありません。

どうしたの？

編集: 11/1/2013 ヘッダーの 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 のスクリーンショット:

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/