Question

..以及如何将父/ flexbox放在标题下方？如果标题更改高度，请按下下面的父级？

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

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

Answer 1

位置：固定元素在HTML文档的流程之外，因此如果不使用javascript，页眉的高度就不可能对页面产生影响。对于您的情况，布局如下更好：

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

非常喜欢

<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），并且有一个固定的高度页脚，它们也留有空间。但这应该符合您的要求。

Answer 2

避免使用position:static，在display:flex标记本身设置<body>，然后设置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>

如何适应孩子父母Flexbox的100％高度/宽度？

2 个答案: