Question

我有两个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都显示不重叠。我不知道它是怎么可能的。请告诉我怎么可能？

Answer 1

试试这个;

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

 .wrapper {
     position: relative;  
 }

Answer 2

像页眉和页脚一样，中间没有内容？您必须使用绝对/固定定位。如果页面垂直变得太小，它们将重叠，但是您可以使用垂直媒体查询来设置底层相对。或者使用一些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;    
        }
    }

Answer 3

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

e.g。

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

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

希望有所帮助。

Answer 4

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

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

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

4 个答案: