javascript - 如何让 3 个 div 在容器内水平对齐，高度为 100%

Question

编辑:通过添加 float 固定对齐。高度仍然没有填满 100%。更新外观:https://gyazo.com/4030d76c62c106fae5fbbb07f062efdd

我有一个页脚容器，我想在其中包含 3 列(我现在将它们设为绿色、白色和红色，以便您更容易看到)。目前它们是垂直堆叠的，但我希望它们并排放置，并且高度为 100% 以填充容器的高度。这是目前看起来很假的图片，请忽略大黑框，这些只是为了让我可以看到页面上的内容，但最终会是透明的等。https://gyazo.com/12d0642e5fd9518a663606668ec06311

它们每个都有 33% 的宽度，因为我想遵循响应式实践，并且我目前已经尝试从每个 div 中删除所有填充和边距等。

非常感谢任何帮助，谢谢。

HTML:

<div id="Page">

        <div id="content" class="wrapper">

        </div>      

        <div id="footer">
            <div id="footerContainer">
                <div id="footerLeft">
                    <p>
                    Test
                    </p>
                </div>
                <div id="footerCenter">
                    <p>
                    Test
                    </p>
                </div>
                <div id="footerRight">
                    <p>
                    Test
                    </p>
                </div>
            </div>    <!-- footerContainer -->
        </div> <!-- Footer -->

    </div> <!-- Page -->

CSS:

#content {
    background-color: black;
}

.wrapper {
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

#footer {
    position: absolute;
    width: 100%;
    height: 300px;
    background-color: black;
}

#footerContainer {
    width: 60%;
    max-height: 100%;
    margin: 0 auto;
}

#footerLeft {
    width: 33%;
    height: 100%;
    float: left;
    background-color: darkolivegreen;
    padding: 0;
}

#footerCenter {
    width: 33%;
    height: 100%;
    float: left;
    background-color: white;
    padding: 0;
}

#footerRight {
    width: 33%;
    height: 100%;
    float: left;
    background-color: firebrick;
    padding: 0;
}

Answer 1

将display: flex 添加到#footerContainer 规则，并将max-height: 100%; 更改为height: 100 %; 在 #footerContainer

#content {
    background-color: black;
}

.wrapper {
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

#footer {
    position: absolute;
    width: 100%;
    height: 300px;
    background-color: black;
}

#footerContainer {
  display: flex;
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

#footerLeft {
    width: 33%;
    background-color: darkolivegreen;
}

#footerCenter {
    width: 33%;
    background-color: white;
}

#footerRight {
    width: 33%;
    background-color: firebrick;
}

<div id="Page">

        <div id="content" class="wrapper">

        </div>      

        <div id="footer">
            <div id="footerContainer">
                <div id="footerLeft">
                    <p>
                    Test
                    </p>
                </div>
              <div id="footerCenter">
                    <p>
                    Test
                    </p>
                </div>
              <div id="footerRight">
                    <p>
                    Test
                    </p>
                </div>
            </div>    <!-- footerContainer -->
        </div> <!-- Footer -->

    </div> <!-- Page -->

---

这是我简化了标记和 CSS 的版本

#content {
  background-color: black;
}
.wrapper {
  width: 60%;
  height: 100%;
  margin: 0 auto;
}
#footer {
  position: absolute;
  width: 100%;
  height: 300px;
  background-color: black;
  display: flex;
  justify-content: center;
}
#footer > div {
  width: 20%;
}
#footerLeft {
  background-color: darkolivegreen;
}
#footerCenter {
  background-color: white;
}
#footerRight {
  background-color: firebrick;
}

<div id="Page">

  <div id="content" class="wrapper">

  </div>

  <div id="footer">
    <div id="footerLeft">
      <p>
        Test
      </p>
    </div>
    <div id="footerCenter">
      <p>
        Test
      </p>
    </div>
    <div id="footerRight">
      <p>
        Test
      </p>
    </div>
  </div>
  <!-- Footer -->

</div>
<!-- Page -->

---

一个用于旧浏览器，使用 display: table

#content {
  background-color: black;
}
.wrapper {
  width: 60%;
  height: 100%;
  margin: 0 auto;
}
#footer {
  position: absolute;
  width: 100%;
  height: 300px;
  background-color: black;
}
#footerContainer {
  display: table;
  width: 60%;
  height: 100%;
  margin: 0 auto;
}
#footerContainer > div {
  display: table-cell;
  width: 33%;
}
#footerLeft {
  background-color: darkolivegreen;
}
#footerCenter {
  background-color: white;
}
#footerRight {
  background-color: firebrick;
}

<div id="Page">

  <div id="content" class="wrapper">

  </div>

  <div id="footer">
    <div id="footerContainer">
      <div id="footerLeft">
        <p>
          Test
        </p>
      </div>
      <div id="footerCenter">
        <p>
          Test
        </p>
      </div>
      <div id="footerRight">
        <p>
          Test
        </p>
      </div>
    </div>
    <!-- footerContainer -->
  </div>
  <!-- Footer -->
  <!-- Footer -->

</div>
<!-- Page -->