CODEWITHSUNDEEP
htmlcss
nKognito
nKognito

Reputation: 6363

stretch div vertically

I am trying to implement cosntruction, described here. 

<div id="wrap">
    <div id="header">
        header
    </div>
    <div id="main">
        main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
    </div>
</div>
<div id="footer">
    footer
</div>​

#header {
    border-top:20px solid #fff;
    height: 33px;
    line-height: 33px;
    text-align: center;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
    overflow: auto;
    padding-bottom: 53px; /* must be same height as the footer */
    background-color: red;
    border: solid 1px blue;
    height: 90%;
}
#footer {
    position: relative;
    margin-top: -53px; /* negative value of footer height */
    height: 33px;
    line-height: 33px;
    border-bottom:20px solid #fff;
    text-align: center;
}

​

The whole page has background color (gray), header and footer are transparent (so you can see the page's background through it) and the content block has red background. Despite the fact that content part is stretchable it doesn't fill with the background the whole block, only the actual.

  1. Is it possible to fill the whole content block with the color?
  2. While minimizing window the footer floats on content. is it possible to disable such behaviour?

Upvotes: 0

Views: 5625

Answers (2)

Alfred
Alfred

Reputation: 21396

Here is a workaround of what you are looking for. Hope this helps.

Upvotes: 5

Zendy
Zendy

Reputation: 1684

Add this lines of code below to your code:

#main{
  position: absolute;
  top: 33px;
  bottom: 33px;
  left: 0;
  right: 0;
}

#wrap{
  position: relative;
}

Upvotes: 0

Related Questions