Question

我试图让导航保持在包装器的边界内。导航在100％高度的包装内，我希望导航填充剩余的高度。当然，我在导航上也使用了100％，但它却超出了div。我做错了什么？

＆＃13;

body {
  background: blue;
  background-size: cover;
  font: 14px "Roboto", sans-serif;
  font-weight: 300;
  padding: 0;
  margin: 2% 4%;
}

* {
  box-sizing: border-box;
}

.wrapper {
  background: #fff;
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
  border-radius: 5px;
}

.header {
  display: flex;
  flex-flow: row;
  height: 75px;
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: purple;
}

.box {
  padding: 10px;
  height: 100%;
}

.box:last-child {
  sborder-bottom: 2px solid #EBEBEB;
  sswidth: 100%;
}

.box:first-child {
  width: 223px;
  sborder-right: 2px solid #EBEBEB;
}

.main {
  padding: 10px;
  order: 2;
  height: 100%;
}

.side {
  border-bottom-left-radius: 5px;
  background: #292F32;
  color: #6B757D;
  padding: 10px;
  flex: 0 0 223px;
  order: 1;
  height: 100%;
}


/*# sourceMappingURL=style.css.map */

＆＃13;

<body>
  <div class="wrapper">
    <div class="header">
      <div class="box">
        intersect
      </div>

      <div class="box">
        rest
      </div>
    </div>

    <div class="side">
      navigation
    </div>

    <div class="main">
      main content
    </div>
  </div>
</body>

＆＃13;

Answer 1

我做错了什么？

您全部使用height: 100%，无法与Flexbox一起正常浏览浏览器。

相反，请使用Flexbox自己的属性，例如flex: 1，它将填充flex列容器中的剩余空间/高度。

在这种情况下，最简单的解决方案是包装side / main，制作内包装display: flex并将外包装更改为flex-direction: column

需要包装器是因为使用wrap enable flex行容器，它是控制项目拉伸并填充父级高度的align-content。

当你给header一个高度时，你无法实现这个目标，因为它会在header和{{之间产生间隙 1}} / side，除非main的高度是固定的，即使内容强制它也不应该扩展。

如果是这种情况，在您使用固定高度的情况下，首先不需要Flexbox，您可以使用CSS Calc。

注意，我还删除了一些不需要的属性，这些属性不需要或者是默认属性。

Stack snippet

＆＃13;

header

＆＃13;

body {
  background: blue;
  background-size: cover;
  font: 14px "Roboto", sans-serif;
  font-weight: 300;
  margin: 2% 4%;
}

* {
  box-sizing: border-box;
}

.wrapper {
  background: #fff;
  display: flex;
  flex-direction: column;           /*  added  */
  height: 100vh;
  border-radius: 5px;
}

.header {
  display: flex;
  height: 75px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: purple;
}

.box {
  padding: 10px;
}

.box:last-child {
  sborder-bottom: 2px solid #EBEBEB;
  sswidth: 100%;
}

.box:first-child {
  width: 223px;
  sborder-right: 2px solid #EBEBEB;
}

.wrapper-inner {
  flex: 1;                          /*  fill available space/height  */
  display: flex;
}


.main {
  padding: 10px;
}

.side {
  border-bottom-left-radius: 5px;
  background: #292F32;
  color: #6B757D;
  padding: 10px;
  flex: 0 0 223px;
}


/*# sourceMappingURL=style.css.map */

＆＃13;

Answer 2

只需将height:calc(100vh - 75px);添加到.side班级而不是height:100%

那是什么？

高度：计算（100vh - 75px）

--> 100vh is the 100 (viewpoint units, thx to @LGSon for correcting me) 
--> - 75px is the height of the `.header` class

＆＃13;

body {
  background: blue;
  background-size: cover;
  font: 14px "Roboto", sans-serif;
  font-weight: 300;
  padding: 0;
  margin: 2% 4%;
}

* {
  box-sizing: border-box;
}

.wrapper {
  background: #fff;
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
  border-radius: 5px;
}

.header {
  display: flex;
  flex-flow: row;
  height: 75px;
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: purple;
}

.box {
  padding: 10px;
  height: 100%;
}

.box:last-child {
  sborder-bottom: 2px solid #EBEBEB;
  sswidth: 100%;
}

.box:first-child {
  width: 223px;
  sborder-right: 2px solid #EBEBEB;
}

.main {
  padding: 10px;
  order: 2;
  height: 100%;
}

.side {
  border-bottom-left-radius: 5px;
  background: #292F32;
  color: #6B757D;
  padding: 10px;
  flex: 0 0 223px;
  order: 1;
  height:calc(100vh - 75px); <-----------HERE
}


/*# sourceMappingURL=style.css.map */

＆＃13;

<body>
  <div class="wrapper">
    <div class="header">
      <div class="box">
        intersect
      </div>

      <div class="box">
        rest
      </div>
    </div>

    <div class="side">
      navigation
    </div>

    <div class="main">
      main content
    </div>
  </div>
</body>

＆＃13;

儿童div高度伸出父母包装

2 个答案: