Flexbox子项忽略父级的填充

时间：2017-06-16 15:36:38

标签： html css flexbox padding

我的#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/

4 个答案:

答案 0 :(得分：0)

正如桑蒂所说，你可以删除position: absolute上的#main，因为这会将元素放在相对于它最近的祖先位置，忽略祖先的填充。

如果这不是一个选项，您可以使用与填充量匹配的top/left/right/bottom值，如果不再需要，则删除父级的填充。

＆＃13;
＆＃13; 
/* 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

在使用position: relative时，它不会忽略父项的高度，它只是保留父项的填充，但除了它填充父项之外 - 请参阅我的代码段。当然，当你为孩子的身高使用百分比值时，必须设定父母的身高...

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<div id="wrapper-main">
 <main id="main">
some content
 </main>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

1。从position: absolute;移除#main。

绝对定位的项目是＆＃34;流出的＆＃34;。将父项设置为relative会将绝对子元素的边界框修改为自己的高度和宽度，但不考虑填充。

2。将包装器align-items: center;更改为align-items: stretch;

在我看来，你不希望孩子在中间垂直对齐，而是要占据包装的整个高度。 align-items: stretch将应用此行为。

Updated Fiddle

＆＃13;
＆＃13; 
/* 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

尝试将其添加到父元素： box-sizing：border-box;

这更改了浏览器计算宽度和高度的方式，因此包括填充和边框。通过flex，在父级上使用border-box可以解决间距问题。

相关问题
最新问题