如何将div放在容器的底部？

是的,你可以做到这一点,没有absolute定位,也没有使用tables(带有标记的螺丝等).

演示
经过测试,可以在IE> 7,chrome,FF上进行测试,这是一个非常容易添加到现有布局的东西.

    Some content you don't want affected by the "bottom floating" div
    
supports not just text

    

        Some other content you want kept to the bottom
        
this is in a div
    

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

float:bottom即使考虑到@Rick Reilly的回答中指出的问题,它也能有效地做到这一点!

这是一个古老的问题,但这是一种独特的方法,可以在几种情况下提供帮助.

纯CSS,无绝对定位,无需修复任何高度,跨浏览器(IE9 +)

看看工作小提琴

因为正常的流量是"从上到下",我们不能简单地要求#copyrightdiv坚持他父母的底部而没有绝对的某种定位,但是如果我们想让#copyrightdiv坚持他父母的顶部,那么将非常简单 - 因为这是正常的流动方式.

所以我们将利用这个优势.我们将改变divHTML中s 的顺序,现在#copyrightdiv位于顶部,内容立即跟随它.我们还使内容div一直延伸(使用伪元素和清除技术)

现在只是在视图中反转该顺序的问题.这可以通过CSS转换轻松完成.

我们将容器旋转180度,现在:向上 - 向下.(我们将内容反转回来看起来正常)

如果我们想在内容区域中有一个scroolbar,我们需要应用更多的CSS魔法.可以显示在这里 [在那个例子中,内容低于标题 - 但它的想法相同]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

  

    Copyright Foo web designs
  
  

    
    
Element 1
    
Element 2
  

  

  
  


   Copyright Foo web designs

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}