Html 垂直对齐问题_Html_Css - Fatal编程技术网

Html 垂直对齐问题

html css

Html 垂直对齐问题,html,css,Html,Css,有人能告诉我我做错了什么吗？我有一个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 gre

有人能告诉我我做错了什么吗？我有一个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>


#包裹{
宽度：210px；
身高：100%；
边框：1px纯红；
}
#顶{
宽度：200px；
高度：100px；
边距：0自动0自动；
边框：1px纯绿色；
}
#btm{
宽度：200px；
高度：100px；
位置：相对位置；
底部：0；
边距：0自动0自动；
边框：1px纯红；
}
adf
adf

试试这个：

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

它似乎在工作，我拿出了位置：相对；你不需要它：

请看这里：

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

这就解决了：

html:

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

关键点：

首先给html和正文100%的高度，然后你的div将100%垂直拉伸

给你的容器一个

位置：相对的，没有左值或顶值


给底部div一个位置：绝对（使其相对于容器div），并且底部：0

它在哪个浏览器中不工作？我穿Chrome很好看：
你能更深入地描述一下发生了什么吗？@wajiw，两个内分区都是顶部对齐的，一个叠在另一个上。底部内分区需要在包装器的底部。哦，在顶部和btm分区中添加“float:left；”。我刚刚添加了它们，但仍然没有骰子。这些内部div无法正确对齐。Paul，包装div是100%，这在您的屏幕截图中不明显。我刚刚在FF和Chrome中试用过，但不起作用。@Jim-我已将您提供的代码粘贴到一个文件中，屏幕截图是该代码在Chrome和Firefox中的呈现方式。您是否在另一个浏览器中查看它，其中的#wrap
比屏幕截图中显示的要高？如果是的话，哪种浏览器？保罗，我有FF、Chrome和Opera，它们的渲染效果都完全一样。你知道包装器div必须在100%高度吗？@Jim-是的，我已经得到了你提供的所有代码，包括#wrap上的100%高度声明。看见如果你的问题还没有解决，你能把你看到的完整的HTML和CSS发布出来吗？否则我们帮不了你。事实上，这并没有解决我的问题，因为他使用的是绝对定位，而我不能使用。我看到的是一个包装，它被拉伸到与btom和顶部div组合相同的高度。在我看来，你的例子和我的表格是一样的。将包装纸的高度设为100%，然后你会看到里面的div叠在另一个上面。是的，塞巴斯蒂安，这确实有效。非常感谢。不过我有个问题。。。我不能给我的表格增加100%的高度，因为它会拉伸整个网站。我只想要包装上100%的高度。这个包装器是站点中的一个侧边栏。你能给它一个像素高度吗？是的，我可以这样做。不过，只是为了好玩，我删除了你的html和body元素的100%高度，它仍然在工作。这样可以吗？还是需要指定高度>等一下。。我觉得这有问题。。。我不能使用绝对定位，因为底部div将从包装器中出来，进入我的站点。我希望包装器转到其父div的地板。此包装器在站点内设置，并包装在其他div中。您使用哪个浏览器？渲染引擎的构建不尽相同，也不符合规范。。。。
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;
}