div没有调整到相同的高度

时间：2018-02-11 19:15:59

标签： html css css3 flexbox

查看Codepen.io 样品

  1. 如何调整“menu-parent”的高度以匹配“content-parent”的高度？

  2. 为什么Edge和Firefox中的此布局与Chrome的布局不匹配？

    我正在使用：

    • 使用EdgeHTML 15的Windows 1703（Redstone 2）。
    • Chrome 64.0
    • Firefox 58.0.2

    3. 这些是当前的浏览器版本，所以我想我不必为flexbox使用任何前缀。 注意：info-bar必须嵌套到main中。不能使用任何JavaScript，所以HTML＆amp;仅限CSS。

    截图 menu-parent-not-full-height

    动画 parent-problem-animation 

    html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.wrapper {
  background-color: rgb(255, 177, 169);
  border: 5px solid salmon;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  background-color: rgb(255, 238, 141);
  border: 5px solid gold;
  height: 144px;
  width: 100%;
}

.main {
  background-color: rgb(71, 71, 255);
  border: 5px solid blue;
  display: inherit;
  flex-direction: column;
}

.footer {
  background-color: rgb(255, 124, 76);
  border: 5px solid orangered;
  height: 100px;
}

.info-bar {
  background-color: rgb(191, 232, 245);
  border: 5px solid lightblue;
  display: inherit;
  height: 64px;
  width: 100%;
}

.content-and-menu-wrapper {
  background-color: rgb(36, 199, 191);
  border: 5px solid lightseagreen;
  display: flex;
  flex-direction: row;
  overflow-y: scroll;
  flex: 1;
}

.menu-parent {
  background-color: rgb(165, 220, 255);
  border: 5px solid lightskyblue;
  flex-wrap: wrap;
  min-height: 100%;
  width: 275px;
}

.content-parent {
  background-color: rgb(198, 210, 226);
  border: 5px solid lightsteelblue;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}

.menu-item {
  border: 1px solid black;
  height: 100%;
  width: 100%;
}

.content-item {
  border: 1px solid black;
  height: 1000px;
  width: 100%;
}

.spacer {
  box-sizing: border-box;
  margin: 0px;
}
    <div class="wrapper spacer">
  <div class="header spacer">header</div>
  <div class="main spacer">
    <div class="info-bar spacer">info-bar</div>
    <div class="content-and-menu-wrapper spacer">
      <div class="menu-parent spacer">menu-parent
        <div class="menu-item spacer">menu-item</div>
      </div>
      <div class="content-parent spacer">content-parent
        <div class="content-item spacer">content-item</div>
      </div>
    </div>
  </div>
  <div class="footer spacer">footer</div>
</div>

3 个答案:

答案 0 :(得分：1)

嵌套flex容器时可能会很棘手，同时需要一个内部可滚动元素。

首先，要使Firefox / Edge中的布局呈现相同（Chrome也应该需要它，但尝试自行修复）：

  • 由于main是一个灵活列项，因此需要min-height: 0才能让它小于其内容高度，这里有一个很好的答案，更详细地解释了这一点：

  • header / footer保持设置的身高，同时将flex: 1添加到main，所以它需要剩余的高度而不是更多

其次，为了让menu-parent / content-parent同等重要，我们需要额外inner-wrapper display: flex，并从display: flex中移除content-and-menu-wrapper {1}}。

注1;我还删除了一些不需要的属性，这些属性是默认属性或应用不正确（例如，{i} flex-wrap: wrap; height: 100%;上设置了.content-parent。

注2;我在header / footer / info-bar的下方代码片段稍微更改了高度，因此在较小的框架中看起来会更好，但会将原始内容保留在代码集中。

Updated codepen

Stack snippet 

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
.wrapper {
    background-color: rgb(255, 177, 169);
    border: 5px solid salmon;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.header {
    background-color: rgb(255, 238, 141);
    border: 5px solid gold;
    height: 50px;
}
.main {
    background-color: rgb(71, 71, 255);
    border: 5px solid blue;
    display: inherit;
    flex-direction: column;
    min-height: 0;                    /*  Firefox/Edge  */
    flex: 1;                          /*  fill remaining space  */
}
.footer {
    background-color: rgb(255, 124, 76);
    border: 5px solid orangered;
    height: 50px;  
}
.info-bar {
    background-color: rgb(191, 232, 245);
    border: 5px solid lightblue;
    display: inherit;
    height: 50px;
}
.content-and-menu-wrapper {
    background-color: rgb(36, 199, 191);
    border: 5px solid lightseagreen;
    overflow-y: scroll;
    flex: 1;
}
.inner-wrapper {
    display: flex;                    /*  moved from ".content-and-menu-wrapper"  */
}
.menu-parent {
    background-color: rgb(165, 220, 255);
    border: 5px solid lightskyblue;
    width: 275px;
}
.content-parent {
    background-color: rgb(198, 210, 226);
    border: 5px solid lightsteelblue;
    width: 100%;
}
.menu-item {
    border: 1px solid black;
    width: 100%;

}
.content-item {
    border: 1px solid black;
    height: 1000px;
    width: 100%;
}

.spacer {
    box-sizing: border-box;
    margin: 0px;
}
<div class="wrapper spacer">
  <div class="header spacer">header</div>
  <div class="main spacer">
    <div class="info-bar spacer">info-bar</div>
    <div class="content-and-menu-wrapper spacer">
      <div class="inner-wrapper">
        <div class="menu-parent spacer">menu-parent
          <div class="menu-item spacer">menu-item</div>
        </div>
        <div class="content-parent spacer">content-parent
          <div class="content-item spacer">content-item</div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer spacer">footer</div>
</div>

答案 1 :(得分：1)

通过将display:table添加到包装器并将display:table-cell添加到菜单和内容，菜单将是最高单元格（内容）的高度。 

/* This is what replaced .spacer */
* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.outer {
    background-color: rgb(255, 177, 169);
    border: 5px solid salmon;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.header {
    background-color: rgb(255, 238, 141);
    border: 5px solid gold;
    height: 144px;
    width: 100%;
}
.main {
    background-color: rgb(71, 71, 255);
    border: 5px solid blue;
    display: inherit;
    flex-direction: column;
    /* Added to keep info-bar stationary */
    position:relative;
    /* Added to scroll the full length of .inner */
    overflow-y:auto;

}
.footer {
    background-color: rgb(255, 124, 76);
    border: 5px solid orangered;
    height: 100px;  
}
.info-bar {
    background-color: rgb(191, 232, 245);
    border: 5px solid lightblue;
    height: 40px;
    /* Added to keep stationary */
    position:fixed;
    z-index:1;
    /* 3% is the scrollbar */
    min-width: 97%;
}
.inner {
    background-color: rgb(36, 199, 191);
    border: 5px solid lightseagreen;
    /* Any `display:table-cell` children will be at full height */
    display: table;
    flex: 1;
    /* Added to expose .info-bar */
    margin-top:40px;
}
.menu {
    background-color: rgb(165, 220, 255);
    border: 5px solid lightskyblue;
    /* Added so it takes full height of sibling */
    display:table-cell;
    width: 275px;
}
.content {
    background-color: rgb(198, 210, 226);
    border: 5px solid lightsteelblue;
    /* Added so it takes full height of parent */
    display:table-cell;
    height: 100%;
    width: 80%;
  
}
.menu-item {
    border: 1px solid black;
    height: 100%;
    width: 100%;

}
.content-item {
    border: 1px solid black;
    height: 1000px;
    width: 100%;

}
        <div class="outer">
            <header class="header">header</header>
            <main class="main">
                <nav class="info-bar">nav-bar</nav>
                <div class="inner">
                    <section class="menu">menu
                        <article class="menu-item">menu-item</article>
                    </section>
                    <section class="content">content
                        <article class="content-item">content-item</article>
                    </section>
                </div>
            </main>
            <footer class="footer">footer</footer>
        </div>

答案 2 :(得分：0)

Flex可能不是最好的方法。 你能考虑使用网格吗？

<html>
<head>
    <style>
        .container {
            border: solid 3px red;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        .content1 {
            border: solid 3px lightblue;
        }
        .content2 {
            border: solid 3px gray;
            height: 2000px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content1">content1</div>
        <div class="content2">content2</div>
    </div>
</body>
</html>

在您的codepen示例中，您需要更改三个类以实现相同的行为：

.content-and-menu-wrapper {
    background-color: rgb(36, 199, 191);
    border: 5px solid lightseagreen;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-y: scroll;
}
.menu-parent {
    background-color: rgb(165, 220, 255);
    border: 5px solid lightskyblue;
}
.content-parent {
    background-color: rgb(198, 210, 226);
    border: 5px solid lightsteelblue;
}
相关问题
最新问题