Question

我遇到了一些解决这种情况的问题。

我有一个没有设置高度的div“标题”，因为根据浏览器可能有一个变量值。在她的内部，我还有两个div，我想在另一个底部放置一个div，但我从来不知道身高“头”的高度。我试图为div“header”定义一个高度，但有时会失败。

Answer 1

将position:absolute与父级的定位上下文结合使用，例如：

<header>
    Ohai
    <div>
        Noes!
    </div>
</header>

CSS：

header {
    position:relative;
    height:25%;
    background:#eee;
}
div {
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-50px;
    width:100px;
    background:red;
}

标题的大小未知，因为它基于视口高度，而div通过position:absolute和bottom:0的组合锁定在其底部。标题需要position:relative来指定绝对定位的子元素使用的定位上下文。

Fiddle here

Answer 2

只需使用clear:both作为底部的第二个div，并将标题的高度设置为height:auto

样品：

<div id="header">
    <div id="first">
      first
    </div>

    <div id="second">
    second
    </div>
</div>

CSS：

#header{height:auto}
#first{}
#second{clear:both}

DEMO

Answer 3

执行此操作的一种方法是在标题div上设置position:relative，并在要设置在标题底部的子div上设置position:absolute和bottom:0。< / p>

<强> jsFiddle example

Answer 4

<div id="header">

            <h2>Some title..</h2>   


            <div class="right">          
                <p style="color: black;display: inline">
                    Some data.....
                </p>                
            </div>


            <div class="left">              
                <form action="#" >
                    <input type="text" placeholder="put here..." required="required">
                    <button type="submit">Validar</button>
                </form>  
            </div>


        </div>

CSS：

#header{position: relative;height: 150px; border:1px solid black}
.right{right: 0; bottom: 0; top:auto; position: absolute}
.left {left: 0; bottom: 0; top:auto; position: absolute}

这项工作在Chrome和Firefox中运行良好但在IE中无效。具有左侧css的div不会放在“标题”的底部。

Answer 5

<div>
    <div>
        div1
    </div>
    <div>
        div2
    </div>
</div>

如何在不知道父级div高度的情况下将div放在另一个div的底部

5 个答案: