如何将第一个div放在页面底部和第二个div顶部而不崩溃?

时间:2014-11-06 10:19:43

标签: html css

我有两个div,see plunker:

<div class="box" style="position:absolute;bottom:0px;background-color:blue">mk</div>
<div class="box" style="position:relative;top:0px;background-color:red">mk1</div>

和css:

.box{
  width:200px;
  height:400px;
  text-align:center;
  background-color:red;

}

我想将第一个div放在页面底部,第二个div放在页面顶部。使用此代码进行定位。但是第二个div(顶部div)换行第一个div(位于底部)。我希望div都显示不重叠。我不知道它是怎么可能的。请告诉我怎么可能?

4 个答案:

答案 0 :(得分:1)

试试这个;

.box{
    background-color: red;
    height: 400px;
    text-align: center;
    width: 200px;
 }

 .wrapper {
     position: relative;  
 }

答案 1 :(得分:0)

像页眉和页脚一样,中间没有内容?您必须使用绝对/固定定位。如果页面垂直变得太小,它们将重叠,但是您可以使用垂直媒体查询来设置底层相对。或者使用一些javascript。

我已经将它们换成了圆形,让第一个div位于顶部。更有意义,除非你不能这样做? http://jsfiddle.net/xbsh1kw0/

    .box{
      width:200px;
      height:100px;
      text-align:center;
      background-color:red;

    }

    .box1 {
        background-color: blue;
        position:relative;
        top:0px;
    }
    .box2 {
        position:absolute;
        bottom:0px;
        background-color:red
    }
    @media (max-height: 200px) {
        .box2 {
            position: relative;    
        }
    }

答案 2 :(得分:0)

为此,div的父/包装器需要设置一个高度并将其位置设置为相对。

e.g。

.wrapper {
  position: relative;
  height: <some value>;
}

在您的情况下,如果您希望父级是屏幕高度的100%,则需要先设置该级别。这里的这个问题应该有助于CSS Div stretch 100% page height

希望有所帮助。

答案 3 :(得分:0)

我使用此代码得到了这个:

<div style="overflow: scroll;">
      <div class="box" style="position:static;bottom:0px;background-color:blue">mk</div>
      <div class="box" style="position:static;top:0px;background-color:red">mk1</div>
</div>