等高容器

Question

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

我正在努力解决两件事： - 保持包装器背景从顶部到底部，而没有1列浮动在另一个旁边，并最终占据整页宽度（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。

您可以阅读有关flex here at css-tricks

的更多信息

检查此代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;