0

I am having issues configuring the position attributes from a header and div element. The issue arises whenever I try to align the header to occupy 100% of the viewports width and 60px in height. In order to eliminate all the white space I set position:absolute and set the left:0px and top:0px however I also have a div element that is supposed to occupy the rest of the screen space with zero whitespace at the sides or upper bounds but specifying the position for the header takes it out of normal page flow and I get unwanted results from attempting to set height:100%. Here is a link to what I have so far. Fiddle

<body >

<div id="header">

</div>
<div id="content">
    <p>Hello world</p>
</div>
</body>


    #header
{
    position:absolute;
    left:0px;
    top:0px;
    height:60px;
    width:100%;
    background-color:rgb(60,125,56);

}
#content
{
    position:relative;
    left:0px;
    bottom:0px;
    width:100%;
    height:calc(100% - 60px);
    background-color:rgb(45,45,54);

}

1 Answer 1

1

You want to change the position of the content to absolute, and there's no need for calc:

#header {
    position:absolute;
    left:0px;
    top:0px;
    height:60px;
    width:100%;
    background-color:rgb(60,125,56);

}

#content {
    position:absolute;
    left:0px;
    bottom:0px;
    top:60px;
    width:100%;
    background-color:rgb(45,45,54);
}
1
  • Oh your solution works flawlessly, I had solved it a second before you posted (in a much cluttered solution) by setting the body's margin's to zero. I assume that your solution works since you set the content div's bottom to 0px and both the element's position to absolute which takes care of the white space. Nice job.
    – Alan
    Dec 10, 2014 at 1:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.