Results 1 to 4 of 4

Thread: calculating div height

  1. #1
    Join Date
    Jun 2008
    Posts
    192
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default calculating div height

    Hello,

    I'm having a problem sizing a div properly.

    I've got 3 divs on the page: a header, a body, and a footer. I'm positioning and sizing them as follows:

    <div id="header" style="height: 75px; width: 100%;">
    header
    </div>
    <div id="body" style="height: calc(100vh - 105px); width: 100%;">
    body
    </div>
    <div id="footer" style="position: absolute; bottom: 0; height: 30px; width: 100%;">
    footer
    </div>

    This seems to work: I get a header at the top 75px high, I get a footer at the bottom 30px high, and I get the body div in the middle which takes up the remaining height by calculating 100vh minus the sum of the header and footer heights.

    The problem is when I resize the browser. The header stays at the top at 75px, the footer stays at the bottom at 30px, but the body div keeps its original height, effectively cropping some of its content now that the browser is smaller. I figure the problem is that when I subtract 105px from 100vh, the result of that calculation is in pixels. Being in pixels, it will not adjust the height when the browser resizes.

    So what I'm wondering is: is there a way of calculating the remaining height (after header and footer heights have been set) in percentage?

    I know I can handle this in javascript, but I'd really like to practice my CSS skills. Any help will be much appreciated.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    If I'm understanding correctly, I don't think pixels are the issue - the content is cropped because you've set an explicit height. I think you mean "min-height" instead. Either that or continue to use "height" but additionally set overflow-y:auto; to make the box scrollable. Also , shouldn't the footer position be fixed instead of absolute?

    Or are you trying to make a sticky footer? https://www.google.co.uk/search?q=sticky+footer+css

    It's hard to understand without seeing your page in person, so if you need further help, please post a link. Please also clarify what you are trying to achieve.
    Last edited by Beverleyh; 12-04-2015 at 07:25 PM. Reason: Sticky footer link added
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Jun 2008
    Posts
    192
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Unfortunately, I can't post a link to the website as it is running on a private network.

    I'd prefer not to have scrolling. I'd like for the entire contents of the body div to be visible on the screen all at once.

    So if the problem is not pixels, then why is the body div not adjusting its height when I resize the browser? When I set a div's height explicitly to a percent value (say 50%), it adjusts with the browser size. So when the page loads in the browser, the div takes up 50% of the height. If I shrink the browser down, it still takes 50% of the height (which is now a smaller value in terms of pixels).

    Essentially, I need a way to:

    1) Figure out the height of the viewport that remains after subtracting the height of the header and footer.
    2) Make sure the body div adjusts its height when that remaining height changes due to browser resizing.

    I suppose I could use fixed for the footer position, but I'm trying to stay away from scrolling so absolute positioning will do (and seems to work with browser resizing).

    Thanks again for the help.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I guess I don't understand what you're trying to do. If you've established that a percentage height does what you want, why not use 100% instead of 100vh? (Remember that parent containers need 100% height declaring too - body and html in this case.) Can you put up a demo page elsewhere to demonstrate what you described about content 'cropping'?
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Calculating form
    By sawebs in forum Looking for such a script or service
    Replies: 1
    Last Post: 05-03-2012, 02:11 PM
  2. javascript code calculating average height
    By mamita in forum JavaScript
    Replies: 1
    Last Post: 03-02-2010, 11:53 PM
  3. calculating dates in PHP
    By gurmeet in forum PHP
    Replies: 4
    Last Post: 02-11-2010, 07:09 AM
  4. Replies: 0
    Last Post: 07-06-2009, 05:33 AM
  5. need a calculating php formmail
    By shute in forum General Paid Work Requests
    Replies: 1
    Last Post: 04-06-2009, 08:07 PM

Bookmarks

Posting Permissions

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