Question

我想将div与类sidebar一起修复到容器的底部，但position: absolute bottom:0不能使用display: flex的容器

如何解决这个问题？

＆＃13;

/*******************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%;
}

＆＃13;

<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>

＆＃13;

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。

＆＃13;

/*******************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%;
}

＆＃13;

<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>

＆＃13;

Answer 3

最近我发生了同样的问题。在我的情况下，它不是flex的错误，甚至不是最终的定位，结果我有另一个级联下来并影响元素的绝对位置使它看起来像我的新值不起作用。

`position：absolute`与`bottom：0`不能与父显示：flex？

3 个答案: