css - float/clear 突然溢出

Question

我正在尝试使用 float 和 clear 在没有常见网格系统的情况下设置页面样式。页面的宽度和高度都应使用完整视口(viewport)。下面的设置工作正常，除非我开始调整视口(viewport)的大小。移动视口(viewport)后，导航和内容部分突然开始重叠，内容呈现在导航下方。

当用户可能会调整视口(viewport)大小时，我的方法有问题吗？或者我不应该使用 vh 和 vw 吗？

设置应该非常简单:

• 高度为 40 像素的标题栏。
• 宽度为 20vw 的侧边导航部分
• 宽度为 80 vw 的内容部分 - 一些边距。
• 导航和内容部分应具有填充视口(viewport)的最小高度。

79.99vw 和 99.9vh 等尺寸的引入是为了避免任何舍入问题。我还分别尝试了 80vw 和 100vh。

我的模板是这样的:

<div class="dashboard-wrapper">
  <header class="header-bar">
    <h1 class="bar-title">Brand Logo</h1>
    <button class="logout-button">Log out</button>
  </header>
  <section class="side-bar">
    <nav role="navigation" class="sidebar">
      <ul>
        <li>Navigation One</li>
        <li>Navigation Two</li>
        <li>Navigation Three</li>
        <li>Navigation Four</li>
        <li>Navigation Five</li>
      </ul>
    </nav>
  </section>
  <section class="content">
    <h2>Lorem Ipsum</h2>
    <p>Sed ut perspiciatis ...</p>
  </section>
</div>

我的 CSS 看起来像这样:

.dashboard-wrapper {
  margin-right: auto;
  margin-left: auto;
}
.dashboard-wrapper header.header-bar {
  float: top;
  height: 40px;
}
.dashboard-wrapper header.header-bar h1 {
  position: relative;
  margin: 0 0 0 5px;
  float: left;
}
.dashboard-wrapper header.header-bar button {
  position: relative;
  height: 40px;
  width: 80px;
  border: 0;
  float: right;
}
.dashboard-wrapper section.side-bar {
  float: left;
  clear: left;
  width: 20vw;
  min-height: calc(99.9vh - 40px - 20px);
  margin: 10px;
  background: white;
}
.dashboard-wrapper section.content {
  float: right;
  clear: right;
  position: relative;
  width: calc(79.99vw - 30px);
  min-height: calc(99.9vh - 40px - 20px);
  margin: 10px 10px 10px 0;
  background: white;
}

到目前为止，这仅在 Windows 上的 Chrome 中进行了测试。

Answer 1

• 删除了无效的 float:top,
• 添加了 clearfix 类:.cf 以清除 float
• 添加了 box-sizing:border-box 以防万一您可能会使用 padding
• 将 width 切换为 % 单位的 vw 单位，以便在使用 calc 时获得四舍五入的值并保持一致跨设备的结果。
• 一些其他的小东西。

* {
  box-sizing: border-box
}
.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
body {
  margin: 0;
}
.dashboard-wrapper header.header-bar {
  height: 40px;
  /*demo*/
  background: green
}
.dashboard-wrapper header.header-bar h1 {
  margin: 0 0 0 5px;
  float: left;
}
.dashboard-wrapper header.header-bar button {
  height: 40px;
  width: 80px;
  border: 0;
  float: right;
}
.dashboard-wrapper section.side-bar {
  float: left;
  width: 20%;
  min-height: calc(100vh - 60px);
  margin: 10px;
  background: red;
}
.dashboard-wrapper section.content {
  float: left;
  width: calc(80% - 30px);
  min-height: calc(100vh - 60px);
  margin: 10px 10px 10px 0;
  background: lightblue;
}
footer {
 background:orange;
  width:100%
}

<div class="dashboard-wrapper">
  <header class="header-bar cf">
    <h1 class="bar-title">Brand Logo</h1>
    <button class="logout-button">Log out</button>
  </header>
  <div class="main-wrapper cf">
    <section class="side-bar">
      <nav role="navigation" class="sidebar">
        <ul>
          <li>Navigation One</li>
          <li>Navigation Two</li>
          <li>Navigation Three</li>
          <li>Navigation Four</li>
          <li>Navigation Five</li>
        </ul>
      </nav>
    </section>
    <section class="content">
      <h2>Lorem Ipsum</h2>
      <p>Sed ut perspiciatis ...</p>
    </section>
  </div>
  <footer>
    Lorem Ipsum ed ut perspiciatis ...
  </footer>
</div>