vertical align issues
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 wrapper. It isn't working.
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:
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: relativewith no left or top values, - give your bottom div a
position: absolute(which makes it relative to the container div), andbottom: 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;
}
加载中,请稍侯......
精彩评论