`position：absolute` with`bottom：0` does not work with parent have display：flex？

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-header-id-14

“这样的默认对齐方式（或一个由align-items指定）将被覆盖个别弹性项目。“

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

此完全相同的问题发生在我身上最近。在我的情况中，最终并不是挠性甚至是定位的错，事实证明我有另一个层叠下来的类，并且影响了元素的绝对位置，使得它看起来像我的新值不起作用。