Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    emulating a white page in css - height is not auto to bottom of page?!

    this code is what's in my css page, in html i just call <div id=paper>
    width is fine at 600 but height stops at about 50ish px and would like to hit near bottom of browser window. thanks in advance.


    <style type="text/css">

    html {height: 100%}

    body {
    height: 100%
    background-color: gray;
    }

    #paper {
    position: relative;
    width: 600px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    margin-bottom:10px;
    padding:30px;
    background-color: white;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    </style>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    The height of a block element is “auto” if not specified, and that means it collapses to the height of the content (unlike width which expands to 100% by default). You need to specifically set it in order to have it.
    And by the way: the current height you see is 60px, which is the addition of top and bottom padding.

  • #3
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    The height of a block element is “auto” if not specified, and that means it collapses to the height of the content (unlike width which expands to 100% by default). You need to specifically set it in order to have it.
    And by the way: the current height you see is 60px, which is the addition of top and bottom padding.

    Hi - thanks for this response. can you provide the line changes please?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Add height: ???px to the #paper rule (where you replace the question marks with your desired numeric value).

  • #5
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Add height: ???px to the #paper rule (where you replace the question marks with your desired numeric value).
    ok cool - however each screen would have a diff. resolution. i was hoping to put a value that allows the height to auto fit to any bottom of page minus about 10px.

    thx

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    What should happen with the content if the viewport (browser window) is smaller than the length of the content? You can’t infer that the viewport size is equal to the screen resolution. People can and do resize their browser windows and don’t necessarily have their browsers at full screen size.
    A piece of paper is a static thing with fixed dimensions. A website is dynamic, can be resized, zoomed, modified, etc.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •