CODEWITHSUNDEEP
htmlcssposition
user4035
user4035

Reputation: 23719

How to correct the height when using position:relative and negative top

Here is the code:

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link type="text/css" rel="stylesheet" media="all" href="page.css">
    </head>
    <body>
        <div id="header"></div>
        <div id="body"></div>
    </body>
</html>

CSS

body{
    background-color: cyan;
    margin: 0;
    padding: 0;
}

#header{
    width: 100%;
    height: 200px;
    background-color: green;
}

#body{
    width: 100%;
    background-color: blue;
    height: 500px;
    position: relative;
    top: -100px;
}

Rendered page looks like this:

enter image description here

The relatively positioned div#body is taken out of the normal flow, and we can see the cyan body at the bottom. Is it possible to fix it, so the body height ended where div#body ends?

I can't use margin-top: -100px, because on the real page it breaks the horizontal centering in Opera. Fiddle: http://jsfiddle.net/xfqzqhws/

Upvotes: 1

Views: 777

Answers (1)

Sandeeproop
Sandeeproop

Reputation: 1776

Can you check if this will work for you

#body{
  width: 100%;
  background-color: blue;
  height: calc(100% - 100px);
  position: absolute;
  margin-top:-100px;

}

Upvotes: 1

Related Questions