#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    20
    Rep Power
    0

    Header, 100% Div, I don't want scrolling.


    I have a code that is essentially

    <container>

    <Header Stuff>

    <rest of the content>


    i want the <rest of the content> To fill 100% of the rest of the page under the header which is 55 pixels, but not cause scrolling, but the div is essentially causing 55 pixels of scrolling.

    Here is my link.

    http://www.misterguns.com/dev/Sales2.html
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    702
    Rep Power
    441
    There are a few ways you could do it. If you only cared about modern browsers, you could use calc(), i.e.

    Code:
    #maincentersecton2 {height: calc(100% - 55px)}
    If you care about older browsers, the next easiest thing to do would be to make the header have a fixed or absolute position. That will take it out of the flow, and make the 100% not cause scrolling. However, it will also make the content go under the header, so you'd have to adjust for that.

    Code:
    .codrops-top {position: absolute; width: 100%}
    #tophalf {margin-top: 55px;} 
    /* fix collapsing margins from previous */
    #container {border-top: 1px solid transparent}
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    20
    Rep Power
    0
    Originally Posted by rdoyle720
    There are a few ways you could do it. If you only cared about modern browsers, you could use calc(), i.e.

    Code:
    #maincentersecton2 {height: calc(100% - 55px)}
    If you care about older browsers, the next easiest thing to do would be to make the header have a fixed or absolute position. That will take it out of the flow, and make the 100% not cause scrolling. However, it will also make the content go under the header, so you'd have to adjust for that.

    Code:
    .codrops-top {position: absolute; width: 100%}
    #tophalf {margin-top: 55px;} 
    /* fix collapsing margins from previous */
    #container {border-top: 1px solid transparent}
    That got rid of the scrolling but now my divs inside the maincentersection2 aren't fitting without a fixed height. Notice there are two divs on that site, each 50%. As soon as I make those tweaks, they don't want to fill the screen anymore, they want to collapse to a dynamic height, it appears.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    702
    Rep Power
    441
    I'm afraid I'm not following. Which changes did you make? I don't see them on the link above.

IMN logo majestic logo threadwatch logo seochat tools logo