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"容器之外。现在看起来像预期的那样。