html - 垂直堆叠 div 的元素一个在另一个下面

Question

我希望 content_container 中的 div 垂直堆叠在彼此下方并且不重叠。请帮忙。

我的 HTML 代码:

<div id=content_container>
    <div id=sub_nav>
    </div>
    <div id=content>
    </div>
</div>

我的 CSS 代码:

#content_container{
    float: left;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
}

#sub_nav{
    position: fixed;
    width: 100%;
}

#content{
    width: 100%;
}


  [1]: /image/28184.jpg

Answer 1

HTML

<div id=content_container>
    <div id=sub_nav>
    </div>
    <div id=content>
    </div>
</div>

CSS

#content_container{
    float: left;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
}

#sub_nav{
    position: -webkit-sticky;
    position: sticky;
    top:0;
    width: 100%;
}

#content{
    width: 100%;
}

希望对您有所帮助!!

另请参阅 https://css-tricks.com/snippets/css/a-guide-to-flexbox/完整的 flexbox 引用。