使溢出的div位置到底部父div

Question

我的DIV高度为30px;和固定的位置。 我一直在寻找一种方法将溢出的div定位到父DIV的底部 看图和代码：

到目前为止，这是我的代码：

 <div style="position:fixed; bottom:0; left: 0; height:40px; overflow:visible; border:solid gray 1px;">
    <div style="border:solid #999 1px; height: 275px; background-color: #ffffff; margin: 5px; float:left;"></div>
</div>

更新： 如果我添加另一个div，它应该是这样的。这就是为什么我不能在子div上使用绝对位置：

Answer 1

您需要将内部position的{​​{1}}设置为div，将absolute设置为bottom

为了使子div向左浮动，你需要使用一个封装子div的容器div

像这样

0

检查这个小提琴

http://jsfiddle.net/9Yg47/2/

Answer 2

有趣的问题！

为什么这很有趣

以前这个问题根本无法回答，如果没有javascript和/或为css设置预定义的宽度，则认为这是不可能的。

所以这就是网络技术明显发展的地方，而不是使用表格，浮点数，javascript，预定义的宽度元素，只需要一点css3魔法，你问题的目标是可以实现的......

CSS3解决方案

使用 flex-boxes （最近在大多数现代浏览器中引入的技术），您可以轻松地将浮动子元素从固定对齐的父元素中移除..

您可以使用display: flex;定义弹性框，并使用flex: 1;

引入浮动内容

HTML结构

以下代码定义了此答案（和演示）将使用的结构：

<div id="parent">
    <div class="child">
        <div class="child-content">
            <div class="actual-child-content">Wowww! The power of CSS3 is awesome</div>
        </div>
    </div>
</div>

#parent是要在底部修复的容器，.child的角色将在稍后进行探索，.child-content内的所有内容都是您看到的东西。父节点。

要使用的CSS

#parent {
    position:fixed;
    bottom:0;
    left: 0;
    height:40px;
    overflow:visible;
    border:solid #000 1px;
    width:100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    padding: 0px 0px 0px 20px;
    margin: 0px 0px 0px -20px;
}
.child {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position:relative;
    overflow:visible;
    margin-right:10px;
    margin-bottom:10px;
}
.child-content {
    position:absolute;
    bottom:0px;
    border:solid #000 1px;
    background-color:#fff;
    height:104px;
    width:100%;
}
.actual-child-content {
    padding:10px;
}

#parent和.child都有助于制作广告素材。 .child-content处理将.child从#parent的预定义高度和“溢出”身体中分离出来。 #parent是位于底部的容器，.child是具有均匀分割内容的框（取决于有多少）

Demo | Source

更多只是一个方框

那么在#parent内的底部浮动第二个框呢？

好吧，既然css3功能强大且灵活包装给了开发人员现在的梦想，要在第一个框旁边添加另一个框，您只需将另一个.child元素添加到#parent。

<div id="parent">
    <div class="child">
        <div class="child-content">
            <div class="actual-child-content">Wowww! The power of CSS3 is awesome</div>
        </div>
    </div>
    <div class="child">
        <div class="child-content">
            <div class="actual-child-content">Wow, a second box that's floating fine!</div>
        </div>
    </div>
</div>

繁荣，你基本上有一个基于网格的系统，而不是涉及浮动和javascript以及设置预定义宽度的混乱黑客。

Demo

事实上，一个css代码非常强大，你可以简单地将它重用于更多的子框......

<div id="parent">
    <div class="child">
        <div class="child-content">
            <div class="actual-child-content">Wowww! The power of CSS3 is awesome</div>
        </div>
    </div>
    <div class="child">
        <div class="child-content">
            <div class="actual-child-content">Wow, a second box that's floating fine!</div>
        </div>
    </div>
    <div class="child">
        <div class="child-content">
            <div class="actual-child-content">Man, this is powerful.....</div>
        </div>
    </div>
</div>

Demo

他们都漂好了！再见使用表格属性设置div的老旧时代，或者使用 *颤抖* 表....

Bonus

Answer 3

在将近5个小时的寻找解决方案中，我终于想出了一个真正符合我需求的解决方案。 先生anurupr的答案： 它确实很有效，他的答案问题是，如果我试图将一个孩子重新调整为＆＃34;可以说30px＆＃34;而其他兄弟div是275px，最小的div不会粘在页脚上。

Sir extramaster的答案： 真的很强大，我真的相信它看起来很棒ie9及以下不支持灵活盒子。

<强>解： 所以我想出了一个我认为会很有效的解决方案。这是我的代码：

<div class="row-fluid" style="position:fixed; bottom:0; left: 0; height:30px; overflow:visible; border:solid gray 1px;">
    <div class="span3" style="position:relative;">
        <div style="position:absolute; width:100%; height:275px; background-color: #ffffff; bottom:0; border:#000 1px solid;"></div>
    </div>
    <div class="span3" style="position:relative;">
        <div style="position:absolute; width:100%; height:35px; background-color: #ffffff; bottom:0; border:#000 1px solid;"></div>
    </div>
    <div class="span3" style="position:relative;">
        <div style="position:absolute; width:100%; height:275px; background-color: #ffffff; bottom:0; border:#000 1px solid;"></div>
    </div>
</div>

这是一个链接，可以看到演示：jsfiddle