Flexbox子級忽略父級的填充

Question

我的#main元素忽略它的包裝填充。我對孩子設置了position:absolute，但是當我嘗試將其從position:static更改爲position:relative時，它只是忽略父母的height。任何解決方法？

body, html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#wrapper-body { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#wrapper-header { 
 
    width: 100%; 
 
    flex: 0 1 50px; 
 
    background: url("header.png"); 
 
    display: flex; 
 
    align-items: center; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); 
 
    z-index: 5; 
 
} 
 
#wrapper-main { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    position: relative; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 
 
    padding: 25px; 
 
} 
 
#wrapper-footer { 
 
    width: 100%; 
 
    flex: 0 1 auto; 
 
    background-color: #212121; 
 
} 
 
#menu { 
 
    display: flex; 
 
    flex-direction: row; 
 
    list-style-type: none; 
 
    right: 0; 
 
    position: absolute; 
 
} 
 
.menu-button { 
 
    background-color: #3B3B3B; 
 
    width: 100px; 
 
    height: 22px; 
 
    margin-right: 15px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    cursor: pointer; 
 
    color: #F7F7F7; 
 
    border-radius: 2px; 
 
    font-family: "codropsicons", verdana; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
    transition: 0.5s; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 
 
    text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.3); 
 
} 
 
.active-button, .menu-button:hover { 
 
    background-color: #E0962D; 
 
} 
 
#main { 
 
    background-color: green; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 
#copyright { 
 
    height: 20px; 
 
    width: auto; 
 
    display: flex; 
 
    align-items: center; 
 
    font-family: "codropsicons", verdana; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    font-size: 10px; 
 
    color: #F7F7F7; 
 
    margin-left: 15px; 
 
    opacity: 0.1; 
 
}

<div id="wrapper-body"> 
 
    <div id="wrapper-header"> 
 
     <nav id="menu"> 
 
      <a class="menu-button active-button">O nas</a> 
 
      <a class="menu-button">Oferta</a> 
 
      <a class="menu-button">Galeria</a> 
 
      <a class="menu-button">Kontakt</a> 
 
     </nav> 
 
    </div> 
 
    <div id="wrapper-main"> 
 
     <main id="main"> 
 
      Test 
 
      <br> Test 
 
      <br> 
 
     </main> 
 
    </div> 
 
    <div id="wrapper-footer"> 
 
     <div id="copyright">Koyot © 2017 All rights reserved</div> 
 
    </div> 
 
</div>

https://jsfiddle.net/Ldmmxw9m/3/

Answer 1

正如桑蒂說，你可以在#main刪除position: absolute，因爲它是最近的定位的祖先，忽視了祖先的填充，將元件相對於放置。

或者如果這不是一個選項，您可以使用與填充量相匹配的top/left/right/bottom值，並在不再需要時刪除父級上的填充。

/* TAGS */ 
 

 
body, 
 
html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 
/* END OF TAGS */ 
 

 

 
/* WRAPPERS */ 
 

 
#wrapper-body { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#wrapper-header { 
 
    width: 100%; 
 
    flex: 0 1 50px; 
 
    background: url("header.png"); 
 
    display: flex; 
 
    align-items: center; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); 
 
    z-index: 5; 
 
} 
 

 
#wrapper-main { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    position: relative; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 
 
} 
 

 
#wrapper-footer { 
 
    width: 100%; 
 
    flex: 0 1 auto; 
 
    background-color: #212121; 
 
} 
 

 

 
/* END OF WRAPPERS */ 
 

 

 
/* CONTENT */ 
 

 
#menu { 
 
    display: flex; 
 
    flex-direction: row; 
 
    list-style-type: none; 
 
    right: 0; 
 
    position: absolute; 
 
} 
 

 
.menu-button { 
 
    background-color: #3B3B3B; 
 
    width: 100px; 
 
    height: 22px; 
 
    margin-right: 15px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    cursor: pointer; 
 
    color: #F7F7F7; 
 
    border-radius: 2px; 
 
    font-family: "codropsicons", verdana; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
    transition: 0.5s; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 
 
    text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.3); 
 
} 
 

 
.active-button, 
 
.menu-button:hover { 
 
    background-color: #E0962D; 
 
} 
 

 
#main { 
 
    background-color: green; 
 
    top: 25px; 
 
    left: 25px; 
 
    right: 25px; 
 
    bottom: 25px; 
 
    position: absolute; 
 
} 
 

 
#copyright { 
 
    height: 20px; 
 
    width: auto; 
 
    display: flex; 
 
    align-items: center; 
 
    font-family: "codropsicons", verdana; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    font-size: 10px; 
 
    color: #F7F7F7; 
 
    margin-left: 15px; 
 
    opacity: 0.1; 
 
}

<body> 
 

 
    <div id="wrapper-body"> 
 

 
    <div id="wrapper-header"> 
 
     <nav id="menu"> 
 
     <a class="menu-button active-button">O nas</a> 
 
     <a class="menu-button">Oferta</a> 
 
     <a class="menu-button">Galeria</a> 
 
     <a class="menu-button">Kontakt</a> 
 
     </nav> 
 
    </div> 
 

 
    <div id="wrapper-main"> 
 
     <main id="main"> 
 
     Test 
 
     <br> Test 
 
     <br> 
 
     </main> 
 
    </div> 
 

 
    <div id="wrapper-footer"> 
 
     <div id="copyright">Koyot © 2017 All rights reserved</div> 
 
    </div> 
 

 
    </div> 
 
</body>

Answer 2

使用position: relative時不會忽略父母的高度，它只是關注父的填充，但除此之外，它填補父 - 看到我的片段。當然，當你使用一個百分比值對孩子的身高家長的高度已經被設置...

#wrapper-main{ 
 
    flex:1 1 auto; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    position:relative; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 
 
    padding:25px; 
 
    background-color:yellow; 
 
    height: 200px; 
 
} 
 

 
#main{ 
 
    background-color:green; 
 
    height:100%; 
 
    width:100%; 
 
    position:relative; 
 
}

<div id="wrapper-main"> 
 
<main id="main"> 
 
some content 
 
</main> 
 
</div>

Answer 3

從#main刪除position: absolute;。

絕對定位的項目「超出流程」。將父項設置爲relative將會將絕對子元素的邊界框修改爲它自己的高度和寬度，但不會考慮填充。

2.更改包裝的​​到align-items: stretch;

在我看來，你不希望孩子在中間垂直對齊，而是採取了包裝的整個高度。 align-items: stretch將應用此行爲。

Updated Fiddle

/* TAGS */ 
 

 
body, 
 
html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 
/* END OF TAGS */ 
 

 

 
/* WRAPPERS */ 
 

 
#wrapper-body { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#wrapper-header { 
 
    width: 100%; 
 
    flex: 0 1 50px; 
 
    background: url("header.png"); 
 
    display: flex; 
 
    align-items: center; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); 
 
    z-index: 5; 
 
} 
 

 
#wrapper-main { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    align-items: stretch; 
 
    justify-content: center; 
 
    position: relative; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 
 
    padding: 25px; 
 
} 
 

 
#wrapper-footer { 
 
    width: 100%; 
 
    flex: 0 1 auto; 
 
    background-color: #212121; 
 
} 
 

 

 
/* END OF WRAPPERS */ 
 

 

 
/* CONTENT */ 
 

 
#menu { 
 
    display: flex; 
 
    flex-direction: row; 
 
    list-style-type: none; 
 
    right: 0; 
 
    position: absolute; 
 
} 
 

 
.menu-button { 
 
    background-color: #3B3B3B; 
 
    width: 100px; 
 
    height: 22px; 
 
    margin-right: 15px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    cursor: pointer; 
 
    color: #F7F7F7; 
 
    border-radius: 2px; 
 
    font-family: "codropsicons", verdana; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
    transition: 0.5s; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 
 
    text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.3); 
 
} 
 

 
.active-button, 
 
.menu-button:hover { 
 
    background-color: #E0962D; 
 
} 
 

 
#main { 
 
    background-color: green; 
 
    width: 100%; 
 
} 
 

 
#copyright { 
 
    height: 20px; 
 
    width: auto; 
 
    display: flex; 
 
    align-items: center; 
 
    font-family: "codropsicons", verdana; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    font-size: 10px; 
 
    color: #F7F7F7; 
 
    margin-left: 15px; 
 
    opacity: 0.1; 
 
}

<body> 
 

 
    <div id="wrapper-body"> 
 

 
    <div id="wrapper-header"> 
 
     <nav id="menu"> 
 
     <a class="menu-button active-button">O nas</a> 
 
     <a class="menu-button">Oferta</a> 
 
     <a class="menu-button">Galeria</a> 
 
     <a class="menu-button">Kontakt</a> 
 
     </nav> 
 
    </div> 
 

 
    <div id="wrapper-main"> 
 
     <main id="main"> 
 
     Test<br> Test 
 
     <br> 
 
     </main> 
 
    </div> 
 

 
    <div id="wrapper-footer"> 
 
     <div id="copyright">Koyot © 2017 All rights reserved</div> 
 
    </div> 
 

 
    </div> 
 
</body>