如何适应孩子 100% 父 flexbox 的高度/宽度？答案

【问题标题】：How to fit childs 100% height / width of parent flexbox?如何适应孩子 100% 父 flexbox 的高度/宽度？
【发布时间】：2017-12-05 02:51:59
【问题描述】：

..以及如何将父/弹性框放在标题下方？如果header改变了高度，把下面的parent往下推？

我使用的是固定位置，因为除非我设置固定位置或绝对位置，否则我无法获得弹性框显示，但我正在使网站具有响应性，因此我无法放置绝对位置。

HTML

        <div id="header"></div>
            <div class="parent">
                <div id="child1-aside"></div>
                <div id="child2"></div>   
            </div>
    <div id="bottom"></div>

CSS

#header {
            position: fixed;
            display: flex;
            flex-wrap: wrap;
            background-color: #343434;
            top: 0;
            right: 0;
            left: 0;
            height: auto; }

/* 下面是接管整个浏览器的高度/宽度而不是父级的，我需要它保持在页眉和页脚之间，并根据页眉和页脚的高度保持相对。 */

        .parent {
            position: fixed;
            display: flex;
            background-color: orange;
            border: 3px solid blue;
            height: 100%; 
            width: 100%;
        }

        #child1-aside {
            position: fixed;
            display: flex;
            flex-wrap: wrap;
            background-color:  #2052a3;
            border-right: 1px solid white;
            left: 0%;
            width: 9.5%;
            height: 100%; 
        }

          #child2 {  
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
            background-image: url(IMAGE.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
        }

【问题讨论】：

标签： html css flexbox css-position

【解决方案1】：

Position:fixed 元素在 HTML 文档的流程之外，因此如果不使用 javascript，标题的高度不可能对页面产生影响。对于您的情况，最好按如下方式布局：

父 Div 是 100% 的视口，弹性框
标题是上面的第一个孩子
第二个孩子是你的 parent-flexbox 对象，它是页面的主体，flex-grow 为 1
第三个孩子是你的页脚

原来如此

<div class="body"> (flexbox 100vh)
    <div class="header"/> (fixed height, flex-grow=0)
    <p class="page"/> (flex-grow=1, overflow=auto)
    <div class="footer"/> (fixed height, flex-grow=0)
</div>

这将使页眉和页脚保留在页面流中，因此它们的高度会影响它，但滚动条只会显示在内容的中间部分。 jsfiddle example

请注意，这可能不是最佳解决方案，大多数网站只是在网站顶部为页眉留出空间（如 StackOverflow），并有一个固定高度的页脚，它们也为它们留出空间。但这应该符合您的要求。

【讨论】：

谢谢..但我需要它是完全相对的，因为响应速度快......经过几个小时后，我才做到了。明天我会发布我是如何做到的，并且效果很好。

【解决方案2】：

避免position:static，在<body>标签本身上设置display:flex，然后设置flex-direction: column，那么一切都变得容易了：

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#header {
  background-color: blue;
  flex: 0 1 15%;
}

#main {
  flex: 1 1 auto;
  background-color: orange;
  border: 3px solid red;
  display: flex;
}

#left {
  background-color: orange;
  border-right: 1px solid white;
  flex: 0 0 10%;
}

#right {
  background-color: green;
  flex: 1 1 0px;
}

#bottom {
  flex: 0 1 15%;
  background-color: violet;
}

<div id="header"></div>
<div id="main">
  <div id="left"></div>
  <div id="right"></div>
</div>
<div id="bottom"></div>

【讨论】：