css - 幅に従わない：可能な解決策？

Question

私はかなり奇妙な振る舞いをしています<nav>：

私のhtmlは単純です：

<div class="rounded screen defaultBg">
    <header>
        <img src="/img/logo-temp.png" alt="logo" width="185" height="88"/>
    </header>

    <nav>
        Nav<br/>
        Nav<br/>   <!--Placeholder-->
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav
    </nav>

    <div id="content">
        ...
    </div>
    <footer>...</footer>
</div>

そして、関連するCSSは

nav {
    display:table-cell;
    width:200px;
}

#content {
    display:table-cell;
    width:80%;
}

.rounded {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

.screen {
    padding:3px;
    display:table;
    width:1000px;
    margin:auto;
}
.screen header, .screen footer {
    display:table-row;
    text-align:center;
}

私が見つけた唯一の回避策は、で.screen幅を指定することでした%が、私のレイアウトはいくつかの画面サイズに固有であるため、正確なピクセル値が必要です。この問題を修正する方法について誰かが洞察を提供できますか？

Answer 1

何らかの理由でこれを回避する唯一の方法は、ヘッダーとフッターをdiv class="screen"コンテナーの外側に配置することです。今意図したように見えます。