html - 等高div容器

Question

我正在尝试创建一个 2 列布局 - 整个页面位于宽度为 80% 的 div 容器中。 - 在这个容器中，我试图创建 2 列， 在这 80% 的页面宽度中，前 20% 宽度和第二个 80% 宽度。 - 两列的高度不同

我在为两件事而苦苦挣扎: - 保持包装背景从上到下，同时不会有 1 列 float 在另一列旁边并最终占据整个页面宽度(80%)。

解决方案使我找到了正确的页面布局，但没有保留背景颜色(而且在 h1 和 nav 之间创建了一个可怕的空间)如下:

body {
  background-color:rgb(77,77,77);
  background-image:url("images.jpg");
  background-attachment:fixed;
  margin: 0;
  padding: 0;
  height: 100%;
}

.wrapper {
  background-color: rgba(253,251,220,0.9);
  width: 80%;
  min-height:100%;
  padding: 0;
  margin: auto;
  position:relative;
}

.container {
  margin: auto;
  min-height: 100%;
}

.aside_box {
  float: left;
  width: 20%;
  min-height:100%;
}

.box {
  background-color: rgba(253,251,220,0.9);
  border: 0 10em;
}

.box-70-100 {
  float: right;
  width: 80%;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: rgba(237, 164, 37, 0.8);
  overflow: hidden;
  float:top;
}

<div class="wrapper">
  <div class="container">
    <header id="head">
      <h1>..</h1>
      <div class ="nav"></div>
    </header>
  </div>

  <div class="container">
    <article>
      <section>
        <div class="aside_box">
          <aside>
            <div class = "box">
              <h2>FQA</h2> 
            </div>
          </aside>   
        </div>
      </section>

      <section>
        <div class="box-70-100">
          <div class = "box"></div>
        </div>
      </section>
    </article>
  </div>
</div>

Answer 1

您可以使用display: flex。我添加了两个新类 flex-1 和 flex-2 而不是使用 flex: 5 或 flex-shrink: 5 来提供宽度 或者你可以使用 flex-basis: 80% 意味着 div 将比 flex-1 大 5 倍。

您可以阅读有关 flex 的更多信息 here at css-tricks

检查这段代码:

body {
  background-color: rgb(77, 77, 77);
  background-image: url("images.jpg");
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  height: 100%;
}

.wrapper {
  background-color: rgba(253, 251, 220, 0.9);
  padding: 0;
  width: 80%;
  margin: auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

.flex-1 {
  border: 1px solid blue;
  flex: 1;
  margin: 0 10px 0 0;
}

.flex-2 {
  border: 1px solid red;
  flex: 5;
}

.container {
  min-height: 100%;
}

.aside_box {
  float: left;
  width: 20%;
  min-height: 100%;
}

.box {
  background-color: rgba(253, 251, 220, 0.9);
  border: 0 10em;
}

.box-70-100 {
  float: right;
  width: 80%;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: rgba(237, 164, 37, 0.8);
  overflow: hidden;
  float: top;
}

<div class="wrapper">
  <div class="container flex-1">
    <header id="head">
      <h1>..</h1>
      <div class="nav"></div>
    </header>
  </div>
  <div class="container flex-2">
    <article>
      <section>
        <div class="aside_box">
          <aside>
            <div class="box">
              <h2>FQA </h2>
            </div>
          </aside>
        </div>
      </section>

      <section>
        <div class="box-70-100">
          <div class="box"></div>
        </div>
      </section>
    </article>
  </div>
</div>