Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144

    100% height, minus top margin


    Hi--

    Trying to make a div the full height of the screen with a top margin of 22px, but whatever I do, I get a scrollbar. I need the div to have a background color.

    So far, I've gotten this:

    html, body {height: 100%;}
    #content {min-height: 100%; margin-top: 22px; background-color: #ccc;}
    <html>
    <body>
    <div id="content">
    <p>woo hoo!</p>
    </div>
    </html>
    </body>
    Any guidance is much appreciated.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    Well, sorry for all the in-line on the example. If I understand this right, you want a background color on the whole page, except for the top 22px still being white, and there to be no scrolling? This following example will do.
    First, the body gets set to have no margin/padding.
    Then, a DIV is defined to use 100vh to claim the full vertical height of the window.
    After that, a DIV gets slid into the top of that to claim the upper 22px and act as the requested top 22px margin.
    (The overflow: hidden was to help avoid anything extra that may cause the scrollbars)
    Code:
    <body style="margin: 0; padding: 0;">
      <DIV style="background-color: #ccc; height: 100vh; overflow: hidden;">
        <DIV style="background-color: #fff; height: 22px; left:0; right: 0;"></DIV>
          (Page content...)
      </DIV>
    </body>

    Comments on this post

    • Will-O-The-Wisp agrees
    Last edited by Triple_Nothing; May 10th, 2015 at 08:55 AM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  4. #3
  5. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there Frank Grimes,

    you could try CSS "calc()".

    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>untitled document</title>
    
    <style media="screen">
    html {
       height:100%;
       margin:0;
     }
    body{
        height:calc(100% - 22px); 
        margin:22px 0 0;
     }
    #content {
      min-height:calc(100% - 20px);
      padding:10px;
      background-color:#ccc;
     } 
    </style>
    
    </head>
    <body>
    
    <div id="content">
     <p>woo hoo!</p>
    </div>
    
    </body>
    </html>

    coothead

    Comments on this post

    • Will-O-The-Wisp agrees
    • Frank Grimes agrees
    ~ the original bald headed old fart ~
  6. #4
  7. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144
    Thanks, Triple_Nothing. That's an interesting approach. I'm testing this now to be sure I can use vh units.

    To be clear, I need a background image on the page that's fit to 100% and does not scroll. My content area needs a background color that fills the screen vertically, minus 22px at the top, and has a max-width of 1000px.

    I realize these are all details I did not include in the OP, but your example might get me there. Again, it's the vh units I wonder about and need to know how compatible it is for me on all the desktop and mobile browsers I need.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  8. #5
  9. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144
    @coothead ... just saw your post. That's also very interesting. I haven't seen "calc" before. Again, I need to test this for compability, but looks very cool. Much better than JS solution, IMO. Thank you!
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  10. #6
  11. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there Frank Grimes,

    this site...


    ...shows the browser support for "calc()".

    coothead
    ~ the original bald headed old fart ~
  12. #7
  13. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144
    Originally Posted by coothead
    Hi there Frank Grimes,

    this site...


    ...shows the browser support for "calc()".

    coothead
    Thanks. I saw that, too. It looks promising, but I've had problems in the past where it *should* work, but doesn't. So far, this works great, but I need to test it in various iThings to be sure.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  14. #8
  15. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    Aight. With the more details you offered, I made a few alterations. The main thing I was unsure of was the way you mentioned the whole max-width of 1000px. I currently have it set as a MAX item. So, what this means is, for the sake of it, if you only have 2-3 words on it, it may only be 50px or so wide. If you do not wish it be thin, then you will either need to set a min-width as well, or simply just remove the 'max-' and define it at width: 1000px. It is built to avoid scrolling as you had mentioned, but just to make sure, were you intending the page to not scroll at all, or merely the background?

    View the example: 100% height, minus top margin

    The CSS:
    Code:
    body {
      margin: 0;
      padding: 0;
    }
    #container {
      background-image: url(./brick_wall.jpg);
      background-size: cover;
      height: 100vh;
      overflow: hidden;
      text-align: center;
    }
    #spacer {
      height: 22px;
      left: 0;
      right: 0;
    }
    #content {
      background-color: #ccc;
      display: inline-block;
      height: 100%;
      max-width: 1000px;
    )
    The HTML:
    Code:
    <body>
      <DIV id="container">
        <DIV id="spacer"></DIV>
        <DIV id="content">
          (Page Content...) &nbsp; (Page Content...) &nbsp; (Page Content...) &nbsp; (Page Content...) &nbsp; 
        </DIV>
      </DIV>
    </body>
    Last edited by Triple_Nothing; May 10th, 2015 at 06:12 PM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  16. #9
  17. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there Triple_Nothing,

    your example does not appear to have responsive capabilities.

    Was that intentional?

    coothead
    ~ the original bald headed old fart ~
  18. #10
  19. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    Responsive capabilities? Like adjust width live in the window? No. I just placed the 2nd DIV in the back merely for a visual showing the 1000px width.

    EDIT: Yea, I suppose that STRETCH wording could be a bit misleading. Altered.

    EDIT2: The Viewport items might not work in the older mobile browsers, so for those who don't keep updated, the height may not display to the bottom of the window. Viewport Unit Support
    Last edited by Triple_Nothing; May 10th, 2015 at 06:50 PM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  20. #11
  21. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132

    Responsive capabilities - works on mobile appliances.

    coothead
    ~ the original bald headed old fart ~
  22. #12
  23. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there Frank Grimes,

    if you are not 100% happy with the "calc()" attribute, then just use a "faux margin" instead...

    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>untitled document</title>
    
    <style media="screen">
    html,body {
       height:100%;
       margin:0;
     }
    #container {
        min-height:100%;
        background-color:#ccc;
     } 
    #faux-margin {
        height:22px;
        background-color:#fff;
        background-image:linear-gradient(to bottom,#fff,#ddd);
     }
    #content {
        padding:10px 2%;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="faux-margin"></div>
    
    <div id="content">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p><p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
    lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
    ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
    et mauris scelerisque tristique. Donec fringilla mauris dolor, 
    sit amet vulputate lacus. Nulla feugiat mattis nulla non 
    tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
    nisi eget neque tempus facilisis eu quis sapien.
    </p>
    </div><!-- end #content -->
    
    </div><!-- end #container -->
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~
  24. #13
  25. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144
    Wow...thank you BOTH for all of your help!

    I'm sorry for the lack of details. As much as try to devote some time to this project, I keep getting interrupted so I lose focus quickly. I appreciate your input in spite of it.

    @coothead--I've had very good luck with calc() but I will also have a look at faux margin. One thing I've noticed with calc() is if my content is longer than the screen, I get a 22px margin at the bottom of my content div. Any ideas why?

    @triple_nothing--again, I apologize for the lack of info. I'll have a look at your updated code and see how that works for me. I love the idea of vm units, though. I think there's better support for that now so it may be a better option than it was even a year ago.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  26. #14
  27. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144
    Originally Posted by Triple_Nothing
    Aight. With the more details you offered, I made a few alterations. The main thing I was unsure of was the way you mentioned the whole max-width of 1000px. I currently have it set as a MAX item. So, what this means is, for the sake of it, if you only have 2-3 words on it, it may only be 50px or so wide. If you do not wish it be thin, then you will either need to set a min-width as well, or simply just remove the 'max-' and define it at width: 1000px. It is built to avoid scrolling as you had mentioned, but just to make sure, were you intending the page to not scroll at all, or merely the background?

    View the example: 100% height, minus top margin

    The CSS:
    Code:
    body {
      margin: 0;
      padding: 0;
    }
    #container {
      background-image: url(./brick_wall.jpg);
      background-size: cover;
      height: 100vh;
      overflow: hidden;
      text-align: center;
    }
    #spacer {
      height: 22px;
      left: 0;
      right: 0;
    }
    #content {
      background-color: #ccc;
      display: inline-block;
      height: 100%;
      max-width: 1000px;
    )
    The HTML:
    Code:
    <body>
      <DIV id="container">
        <DIV id="spacer"></DIV>
        <DIV id="content">
          (Page Content...) &nbsp; (Page Content...) &nbsp; (Page Content...) &nbsp; (Page Content...) &nbsp; 
        </DIV>
      </DIV>
    </body>
    Thank you! I'm having a problem with some of this, though. If my content is larger than the screen, it doesn't scroll and if I change heights to min-height in the CSS, it works, but then if the content is shorter than the screen the content box doesn't stretch to the bottom. Any ideas?
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  28. #15
  29. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144
    Okay, I've tinkered with this quite a bit and settled on this:

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>untitled document</title>

    <style media="screen">
    html {height:100%; margin:0;}
    body {height:calc(100% - 22px); margin:22px 0 0; background: url(../images/bg.jpg); background-size: 100%; background-attachment: fixed; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;}
    #content {min-height:calc(100% - 20px); padding:10px; background-color:#ccc; max-width: 1000px; margin: auto; margin-bottom: -163px;}
    footer {max-width: 1000px; text-align: center; background-color: #9e9786; border-top: 1px solid #757575; margin: auto; color: #f3eee3; font-size: 11px; padding: 10px; height: 142px;}
    .shim {height: 142px;}
    </style>

    </head>
    <body>

    <div id="content">
    <p>woo hoo!</p>
    <div class="shim"></div>
    </div>
    <footer>
    way down here
    </footer>

    </body>
    </html>
    Thanks, coothead, for introducing me to calc(). Very cool! I l love how you can mix percentages with pixels.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo