Header 调整浏览器大小时，导航填充会折叠

Question

我正在尝试设置一个简单的 header，以便当浏览器为 re-sized 时，left/right 填充使 header 内容远离边缘window。这对左侧有效，但在右侧，填充似乎折叠起来，内容被部分遮盖。

这是我的 HTML:

<header id="header-container">
  <div class="header-table-wrap">
    <div class="header-table">
      <div class="nav-wrap header-table-cell cell1">
        <nav class="navigation">NAV CONTAINER</nav>
      </div>
      <div class="nav-wrap header-table-cell cell2">
        <nav class="navigation">NAV CONTAINER</nav>
      </div>
    </div>
  </div>
</header>

和 CSS:

body {margin:0;}

.cell2 {text-align:right}
.header-table-wrap { background-color: orange; }
.header-table { background-color: yellow;}
.header-table-cell { background-color: #bbb; }

.header-table {
  display: table;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.header-table-cell {
  display: table-cell;
  vertical-align: top;
}

.nav-wrap { padding: 20px 0; }

我在 codepen 上也有 header 设置：http://codepen.io/dgwyer/pen/ByWNYZ

Answer 1

Demo

.header-table {
  display: table;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing:border-box; /* add this (box-model)*/
}

有关 box-sizing 的更多信息，请参阅 css-tricks

Answer 2

设置在 header table box-sizing: border-box;

CSS

.header-table {
  display: table;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

DEMO HERE

Header 调整浏览器大小时，导航填充会折叠

Header navigation padding collapses when browser resized

css

menu

margin

padding