带有"bottom:0"的"position:absolute"不适用于具有di

Question

我想将div和类sidebar固定到容器的底部，但position: absolute和bottom:0不适用于具有display: flex的容器。

如何解决这个问题？

代码：https://jsfiddle.net/zgmg48z1/1/

/*******************page layout**************************/
.container{
width: 100%;
background-color: #d5d5d5;
display: flex;
align-items: flex-start;
}
.sidebarcontainer{
width: 250PX;
/*height: 6000px;*/
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer{
position: relative;
width: 100%;
height: 100%;
}
.sidebar{
width: 243px;
background-color: white;
height: 500px;
/*top: 1px;*/
/*bottom: 0;*/
/*position: absolute;*/
}
.mainpage{
width: calc(100% - 250px);
padding: 5px;
padding-left: 2px;
height: 600px;
display: inline-block;
box-sizing: border-box;
}
.page{
width: 100%;
height: 100%;
background-color: white;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
align-content: flex-start;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: #031003;
}
/***************end of pagelayout******************/
.card{
width: 250px;
/*height: 400px;*/
align-self: flex-start;
margin: 10px;
display: inline-block;
}
.image{
width: 200px;
margin: 0 auto;
height: 250px;
}
.image img{
width: 100%;
height: 100%;
}

<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
</div>
</div>
</div><!--
--><div class="mainpage">
<div class="page">
<h1>something in the page</h1>
</div>
</div> 
</div>
<div class="footer"></div>

Answer 1

试试这个：

.sidebarcontainer{
/*OTHER STUFF*/
align-self: flex-end;
}

此处解释：https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-头-id-14

"这允许单个弹性项目的默认对齐(或对齐项目指定的对齐)被覆盖。">

Answer 2

如果您希望侧边栏位于容器的底部，可以在侧边栏容器上使用align-self: flex-end。

在这种情况下，您不必在侧边栏上使用绝对位置。但我不确定这是你想要做的，也许你需要有一个100%高度的(容器的)侧边栏容器，并在底部对齐侧边栏的内容。如果你需要，你可以在侧边栏容器上设置一个高度和一个相对位置。然后在侧边栏子项上使用position: absolute和bottom: 0。

/*******************page layout**************************/
.container{
width: 100%;
background-color: #d5d5d5;
display: flex;
align-items: flex-start;
}
.sidebarcontainer{
width: 250PX;
/*height: 6000px;*/
display: inline-block;
box-sizing: border-box;
/* Add align-self: flex-end to the sidebar-container */
align-self: flex-end;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer{
position: relative;
width: 100%;
height: 100%;
}
.sidebar{
width: 243px;
background-color: white;
height: 500px;
/*top: 1px;*/
/*bottom: 0;*/
/*position: absolute;*/
}
.mainpage{
width: calc(100% - 250px);
padding: 5px;
padding-left: 2px;
height: 600px;
display: inline-block;
box-sizing: border-box;
}
.page{
width: 100%;
height: 100%;
background-color: white;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
align-content: flex-start;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: #031003;
}
/***************end of pagelayout******************/
.card{
width: 250px;
/*height: 400px;*/
align-self: flex-start;
margin: 10px;
display: inline-block;
}
.image{
width: 200px;
margin: 0 auto;
height: 250px;
}
.image img{
width: 100%;
height: 100%;
}

<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
</div>
</div>
</div><!--
--><div class="mainpage">
<div class="page">
<h1>something in the page</h1>
</div>
</div> 
</div>
<div class="footer"></div>

Answer 3

最近我也遇到了同样的问题。在我的情况下，这根本不是flex的错，甚至最终也不是定位的错，事实证明，我有另一个类正在级联，它也影响了元素的绝对位置，使我的新值看起来不起作用。