代码之家 › 专栏 › 技术社区 › Stefan0309

如何将一个div放在更大的主div中作为页脚

css html

Stefan0309 · 技术社区 · 3 年前

我想要简单的页眉->内容->我的div中的页脚部分。我想要实现的是:

这是我的 jsfiddle .

我不太明白这个相对的布局,我试图用在我的页脚。相对布局应该查找其父元素(在这种情况下 class="main" 并基于主类进行调整 bottom:0 然而,它并不能以这种方式工作。)

我哪里出了问题?

1 回复 | 直到 3 年前

Lalji Tadhani 3 年前

使用Flex

.procedure-box {
        border: 1px solid #ada9a9;
        /* display: inline-block;*/ /*Remove this*/
        display:flex; /*Add This*/
        flex-direction:column; /*Add this*/
        height: 350px;
        width: 300px;
        margin-right: 15px;
        justify-content:space-between; /*Update this*/
    }
    .header {
        text-align: left;
        margin-left: 15px;
        margin-right: 15px;
    }
    .content-body {
        text-align: left;
        margin-left: 15px;
        margin-right: 15px;
        flex:1;  /*Add this*/
    }

https://jsfiddle.net/lalji1051/h3fm9nt0/1/

https://jsfiddle.net/lalji1051/h3fm9nt0/3/ 更新的答案