Question

我正在尝试将div设置为Flex容器中页面的底部。

不知何故，我可以使用：

position:absolute;
bottom: 10px;

但是div然后包装到整个视口。

我想在一个盒子里修复它。

检查代码。你会明白的。

https://jsfiddle.net/v3v1z7pv/

#container {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-flow: row;
}
body {
  margin: 0px;
  padding: 0px;
}
.box {
  min-width: 300px;
  border: 1px solid black;
  background-color: red;
}
.whiteBox {
  bottom: 10px;
  width: 100%;
  height: 100px;
  background-color: white;
  position: absolute;
}

<div id="container">
  <div class="box">
    <div class="whiteBox">Whte box</div>
  </div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>

Answer 1

将position:relative添加到.box。所以whitebox会留在里面

具有相对定位的页面元素使您可以将子元素绝对定位在其中。

点击此处relative absolute

#container
{
  display:flex;
  height:100vh;
  width:100vw;
  flex-flow: row;
}
body{
  margin:0px;
  padding:0px;
}
.box
{
  min-width:300px;
  border:1px solid black;
  background-color:red;
  position:relative;
}
.whiteBox
{
  bottom:10px;
width:100%;
height:100px;
background-color:white;
position: absolute;

}

<div id="container">
  <div class="box">
    <div class="whiteBox">Whte box</div>
  </div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>

</div>

Answer 2

您错过position:relative .box元素。添加它，你应该得到你想要的结果:)

Answer 3

如果你必须使用定位，那么将position: relative添加到box类，使其成为绝对定位的边界框（即最近的祖先） whiteBox孩子。

否则，您不需要绝对定位此任务。它可以完全用flex属性完成。使用此方法，不会从document flow中删除whiteBox元素。

.box {
    min-width: 300px;
    border: 1px solid black;
    background-color: red;
    display: flex;             /* NEW */
}

.whiteBox {
    /* bottom: 10px; */
    width: 100%;
    height: 100px;
    background-color: white;
    /* position: absolute; */
    align-self: flex-end;      /* NEW */
}

#container {
    display: flex;
    height: 100vh;
    width: 100vw;
    flex-flow: row;
}

body {
    margin: 0px;
    padding: 0px;
}

.box {
    min-width: 300px;
    border: 1px solid black;
    background-color: red;
    display: flex;             /* NEW */
}

.whiteBox {
    /* bottom: 10px; */
    width: 100%;
    height: 100px;
    background-color: white;
    /* position: absolute; */
    align-self: flex-end;      /* NEW */
}

<div id="container">
    <div class="box">
        <div class="whiteBox">Whte box</div>
    </div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
</div>

revised fiddle

将div放在容器

3 个答案: