Держите div внизу другого div - css

Question

© 1965 - 2010

Я хочу, чтобы # копирайт находился внизу # external

Вот код для # copyright

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

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

Спасибо, Жан

Answer 1

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

Это будет иметь неприятный побочный эффект, хотя #copyright больше не будет учитываться в высоте #outer, в вашем примере #outer будет иметь высоту 0px Вы можете добавить нижний отступ к #outer, если вы работаете с фиксированной высотой.

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

Answer 2

1. определить высоту # external
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>

Кроме того, никогда не используйте "0px".Нет такой вещи как ноль пикселей, только ноль.Правильный путь - «правильно: 0;»

Answer 3

Я бы сделал это так:

#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>

Answer 4

Вы можете использовать это 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>

Answer 5

Измените позиционирование на #copyright на абсолютное и добавьте относительный контекст позиционирования на #outer.Затем добавьте bottom: 0px к #copyright.

Извините.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;
}