Question

我正在尝试使用浮动和清除来设置没有常见网格系统的页面。页面应使用宽视图和高度的完整视口。以下设置工作正常，除非我开始调整视口大小。移动视口后，导航和内容部分突然开始重叠，内容将在导航下方呈现。

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

这个设置可能很简单：

标题栏，高度为40px。
宽度为20vw
宽度为80 vw的内容部分 - 一些边距。
导航和内容部分的最小高度应填充视口。

引入了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 s
添加了box-sizing:border-box，以防您使用padding
使用width单位的vw单位切换%，以便在使用calc时获得舍入值，并在各设备之间获得一致的结果。
其他一些小事。

＆＃13;

* {
  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%
}

＆＃13;

<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>

＆＃13;

浮动/清除突然溢出

1 个答案: