将 div 保持在另一个 div 的底部 - css

Keep div at the bottom of another div - css

提问by X10nD

? 1965 - 2010

I want the #copyright to be at the bottom of #outer

我希望 #copyright 位于 #outer 的底部

Here is the css for #copyright

这是#copyright 的css

#copyright{
    position:relative; margin-bottom:0px; width:672px; height:20px; color:#FFF;
}
#yr{
    margin:auto;
}

#f{ position:absolute; right:0px; text-align:center;
}

Thanks Jean

谢谢让

回答by deceze

#copyright {
    position: absolute;
    bottom: 0;
}
#outer {
    position: relative;
}

This will have the unfortunate side effect though that #copyrightdoes not count towards the height of #outeranymore, in your example #outerwould be 0px high. You can add a bottom-padding to #outerif you're working with fixed heights.

这将产生不幸的副作用，尽管#copyright它不再计入高度#outer，在您的示例#outer中将是 0px 高。#outer如果您使用固定高度，您可以添加底部填充。

#copyright {
    position: absolute;
    bottom: 0;
    height: 200px;
}
#outer {
    position: relative;
    padding-bottom: 200px;
}

回答by Māris Kise?ovs

1. define height of #outer
2. set #outer to position:relative;
3. set #copyright to position:absolute; bottom: 0; left: 0;

1. 定义#outer 的高度
2. 将#outer 设置为位置：相对；
3. 将#copyright 设置为位置：绝对；底部：0；左：0；

    #outer {
      height: 100px;
      border: 1px solid red;
      position: relative;
    }

    #copyright {
      position:absolute; 
      height: 30px; 
      bottom: 0; 
      left: 0;
      border: 1px solid black;
      width: 300px;
    }   

    <div id="outer">
       <div id="copyright">
           <span id="yr">? 1965 - 2010</span>
           <span id="f"></span>
           <span id="d"><span>
       </div>
    </div>

Also, never use "0px". There is no such thing as zero pixels, only zero. Correct way is "right: 0;"

另外，永远不要使用“0px”。没有零像素这样的东西，只有零。正确的方法是“正确：0;”

回答by koshin

I would do that this way:

我会这样做：

#copyright {
position: absolute;
bottom: 0;
}
#outer {
position: relative;
height: 200px;
}

<div id=outer>


<div id="copyright">
    <span id="yr">&copy; 1965 - 2010</span>
    <span id="f"></span>
    <span id="d"></span>
</div>



</div>

回答by dimas

You may use this http://codepen.io/anon/pen/KwmMyb:

你可以使用这个http://codepen.io/anon/pen/KwmMyb：

#outer_div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#inner_div {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  background: red;
}

<div id="outer_div">
  <div id="inner_div"></div>
</div>

回答by desertwebdesigns

Change the positioning on #copyrightto absolute and add a relative positioning context to #outer. Then add bottom: 0pxto #copyrightas well.

将定位更改#copyright为绝对并将相对定位上下文添加到#outer。然后加入bottom: 0px到#copyright为好。

Sorry. CSS would look like:

对不起。CSS 看起来像：

#copyright{
   position:absolute; margin-bottom:0px; width:672px; height:20px; color:#FFF; bottom: 0px;
}
#yr{
   margin:auto;
}
#f{
   position:absolute; right:0px; text-align:center;
}
#outer {
   position: relative;
}