如何在inner-div底部固定一个内部div，以便在外部div扩展时移动

Question

因此，我在inner-div内部有一个inner-div。我想要内部div作为页脚，所以它必须坚持外部div的底部。当外部div展开（高度）时，我希望页脚与外部div的底部一起移动。 我希望你明白我的意思？

我该怎么做？

Answer 1

这里是一个小提琴Fiddley de fiddly da

你想要的是：

#inner { 
    position:relative; 
    top: 80%; 
    width: 100%; 
    height: 100%; 
} 

#outer { 
    width:200px; 
    height: 100px; 
} 

希望它能帮助。愿代码与你同在。

Answer 2

下面是一个例子小提琴：http://jsfiddle.net/fdus48df/

#inner { 
    position: absolute; 
    bottom: 0; 
    height: 100px; 
    border: 2px solid red; 
    width: 100%; 
} 
#outer { 
    border: 2px solid blue; 
    position: relative; 
    height: 200px; 
} 

<button id="larger">Larger</button> 
<button id="smaller">Smaller</button> 
<div id="outer"> 
    <div id="inner"> 
    </div> 
</div> 

<script> 
    $(function() { 
     height = 200; 
     $('#larger').click(function() { 
      height += 10; 
      $('#outer').css('height',height+'px'); 
     }); 
     $('#smaller').click(function() { 
      height -= 10; 
      $('#outer').css('height',height+'px'); 
     }); 
    }); 
</script>