3

I can not for the life of me figure this out. I'm trying to use a div to give a semi opaque background to only the content of my page. The problem is the div only goes down as far as the content. I would like for the opaque background to go all the way down to the footer regardless of the content. The page I'm referring to is located here. www.codykrauskopf.com/circus (this is the only page I uploaded) I'm reworking the site to be responsive to the browser size so fixing any widths or heights is not allowed.

CSS:

html, body {
    height: 100vh;
    margin:0;
    padding:0;
    overflow:auto;
}

#circusContent {
    margin-left:100px;
    height:100%;
}

p {
    font-family:georgia;
}

div.topButtons {
    display:inline-block; 
    margin-top:15px;
    line-height:50px;  
    text-align:center;
    vertical-align:middle;
    width:130px;
    background: rgb(166, 166, 166); /* The Fallback */
    background: rgba(166, 166, 166, .5); 
}

#leftTopButton {
    margin-left:75px;
}

a.forms {
    text-decoration:underline;
}

div.topButtons:hover {
    background: rgb(100, 0, 0); /* The Fallback */
    background: rgba(0, 0, 0, 1); 
}

#circusParagraph{
    color:white;
    font-size:14px;
    text-align:center;
    margin-left:125px;
    margin-top:25px;
}

#wrap {min-height: 100vh;
width:99.99999999999%;}
Cody Krauskopf
  • 330
  • 1
  • 4
  • 13

2 Answers2

0

Set the height of the circusContent to 100% but it must be 100% of its parent so the parent must also be set to 100% but 100% of what? That would be "wrap" so set its height to 100% which will be the height of its parent which is the body.

#main,
#wrap,
#content,
#circusContent {
    height:100%;
}

Remove the other heights for those elements.

Now, I see you trying to use the new viewport property, vh, and I'll have to think about that for inner elements if you still want to do it that way.

Rob
  • 14,746
  • 28
  • 47
  • 65
  • This fixed the height of main and wrap but the opaque background still doesn't extend to the bottom of the page. – Cody Krauskopf Mar 02 '14 at 21:49
  • @CodyKrauskopf Sorry, you need to add the height to #main, too. Remove the min-height of 100vh – Rob Mar 02 '14 at 21:51
  • After changing this the footer is now at the bottom of my content but that effectively put it in the middle of my browser screen with the background extending down past the footer. – Cody Krauskopf Mar 02 '14 at 21:55
  • never mind I left out the comma after #main. This works, thank you so much. – Cody Krauskopf Mar 02 '14 at 21:56
  • On #wrap, you still have 'min-height:100vh'. Change that to 'height:100%'. On #main you have 'min-height:100%' Change that to just 'height:100%' – Rob Mar 02 '14 at 21:57
-1

In your CSS you have a typo.

#wrap {
    min-height: 100vh; <--- should be 100%

There is also another typo

html, body {
    height: 100vh; <--- should be 100%
    margin:0;
    padding:0;
    overflow:auto;
}

In debugger I changed the above css typos and it fixed your issue.

Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37
  • I was trying this out from this page http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window I've also tried 100% and it doesn't seem to work either. – Cody Krauskopf Mar 02 '14 at 21:20
  • as a test, set min-height:1000px; just to see if this solves it. no where do i see where you set the page height, so its going to do 100% of auto sized divs, which will only be the length of the content in it. – bart2puck Mar 02 '14 at 21:25
  • The only way I've gotten it to extend further down the page is by explicitly setting the height of the content div(which is the one with the background). Setting min-height:1000px for wrap didn't change the size of main or content. Even if I put min-height:1000px for #main it didn't change the height of content. – Cody Krauskopf Mar 02 '14 at 21:34
  • @vector I can't seem to replicate this. How large is your browser window? I still see a gap between the bottom of the div and the footer. – Cody Krauskopf Mar 02 '14 at 21:43