Question

有人能告诉我这里做错了什么吗？我有一个100％的包装和两个div。顶部div需要位于包装器的顶部，底部div需要位于包装器的底部。它不起作用。

这就是我所拥有的。我已尝试对两个内部div进行垂直对齐，但它也不起作用。

<style>
#wrap {
width:210px;
height:100%;
border:1px solid red;
}
#top {
width:200px;
height:100px;
margin:0 auto 0 auto;
border:1px solid green;
}
#btm {
width:200px;
height:100px;
position:relative;
bottom:0;
margin:0 auto 0 auto;
border:1px solid red;
}
</style>
</head>
<body>
  <div id="wrap">
    <form method="post" action="">
      <div id="top">
adf
      </div>
      <div id="btm">
adf
      </div>
    </form>
  </div>
</body>
</html>

Answer 1

~~似乎工作，我拿出位置：亲戚;你不需要它：~~

~~在此处查看：http://jsfiddle.net/kByXS/~~

编辑：我误解了你的问题：

这里解决了： http://jsfiddle.net/SebastianPataneMasuelli/kByXS/2/

html：

<div id="wrap">
    <form method="post" action="">
        <div id="top">
            top
        </div>
        <div id="btm">
            bottom
        </div>
    </form>
</div>

的CSS：

html {
  height: 100%;   
}
body {
  height: 100%;
  background-color: gray;
}
#wrap {
    width:210px;
    height:100%;
  border:1px solid red;
  position: relative;
}
#top {
  width:200px;
  height:100px;
  margin:0 auto 0 auto;
  border:1px solid green;
}
#btm {
  width:200px;
  height:100px;
  margin:0 auto 0 auto;
  border:1px solid blue;
  position: absolute;
  bottom: 0;
 left: 5px;
}

键：

首先给出html和body 100％的高度，然后你的div将垂直拉伸100％。
为您的容器提供position: relative，但没有左侧或顶部值，
给你的底部div position: absolute（这使得它相对于容器div）和bottom: 0;

Answer 2

哪个浏览器不起作用？在Chrome中对我来说很好看：

alt text

Answer 3

试试这个：

#wrap{ 
width:210px;
height:100%;
border:1px solid red;
position:relative;
}

#top {
float:left;
width:100%;
height:100px;
position:relative;
margin:0 auto 0 auto;
border:1px solid green;
}
#btm {
float:left;
width:100%;
height:100px;
position:relative;
bottom:0;
margin:0 auto 0 auto;
border:1px solid red;
}

垂直对齐问题

3 个答案: