vertical align issues_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-25 15:42 出处：网络

Can someone tell me what I am doing wrong here? I have a wrapper at 100% and two divs inside. The top div needs to be at the top of the wrapper and the bottom div needs to be at the bottom of the wrap

相关专题：css

Here is what I have. I've tried vertical-align on both inner divs but it doesn't work either.

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

In which browser is it not working? Looks fine to me in Chrome:

vertical align issues

~~it seems to be working, i took out position: relative; you don't need it:~~

~~see it here: http://jsfiddle.net/kByXS/~~

edit: i misunderstood your problem:

here it is solved: 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;
}

keys:

give the html and body 100% height first, then your div will stretch 100% vertically.
give your container a position: relative with no left or top values,
give your bottom div a position: absolute (which makes it relative to the container div), and bottom: 0;

Try this:

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