SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    calculate DIV width and height

    HTML Code:
    <body style="width:100%;height:100%;margin:0;padding:0;">
    <div id="004" style="float:left;position:absolute;width:100%;height:100px;background:green;bottom:0px;margin:0;padding:0;">aaa
    </div>
    <div id="001" style="float:left;position:absolute;width:100%;height:100%;bottom:100px;margin:0;padding:0;">
    <div id="002" style="float:left;width:200px;background-color:blue;height:100%;margin:0;padding:0;">bbb</div>
    <div id="003" style="background-color:red;height:100%;margin-left:200px;margin:0;padding:0;">ccc</div>
    </div>
    </body>
    DIV001 AND DIV004 are parent div, DIV002 AND DIV003 are child div of DIV001.
    I want body: height 100%,width 100%;
    DIV004 fix on the bottom, height 200px,width 100%;
    DIV001 width 100%, heght 100%-200px,
    DIV002 width 200px,height 100% of DIV001,
    DIV003 width 100%-200px of DIV001,height 100% of DIV001.

    how to calculate the div width and height? Thanks.

  2. #2
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think you can do it with CSS, you need javascript.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You could do some positioning trickery like you had started with but it would not produce a user friendly layout. You would have to use overflow:auto to allow access to the content at smaller viewport heights which could leave you with scrollbars everywhere.

    I would suggest using CSS to give a full height appearance. You could do a fluid width min-height:100% layout. We call it a Sticky Footer around here most of the time. It could also be done with a fixed position footer but that can complicate things too.

    Something like this may work for you -
    http://www.css-lab.com/demos/stickfoot/fluid-2col.html

    That will give you a full height appearance and when content reaches the footer it will push the footer on down. Most importantly you can access all content with one scrollbar when needed.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi coopersita, how to write a js code like this?
    Hello Rayzur, thanks for your code, but I also want to know the js method for study.

  5. #5
    SitePoint Member
    Join Date
    Sep 2010
    Location
    Bucharest, Romania
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div id="foo"></div>
    Code:
    alert('height: ' + document.getElementById('foo').style.height);
    alert('width: ' + document.getElementById('foo').style.width);

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not good at js, can you write more detailed? thanks.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Don't use JS, use Rayzurs suggestion
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how to calculate body:before margin-top:-32767px?
    If I do not need #header, how to change the code? Thanks.

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by youlichika View Post
    how to calculate body:before margin-top:-32767px?
    Don't mess with that, it's an Opera bug fix.
    It has no visual effects on the page.

    If I do not need #header, how to change the code? Thanks.
    Just cut the header out of the CSS/HTML if you don't need it. However it has a 100px top border on it to reclaim the negative top margin (for footer height) on the wrapping div.

    The first element in the wrapping div gets a top border equal to the footer height to soak up the negative top margin.

    This should be what you are after -
    http://www.css-lab.com/demos/stickfo...2co-nohdr.html

    I used 100px top paddings on the top of each column to replace the soak up border.

  10. #10
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Rayzur, You made it special for me, you are too warmly.
    I still have a small question: how to make the #content border-bottom:1px dashed red near the #footer? Or if I need insert a background color for #content like #left(the color full of the #content)

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    To change the background colors and still retain the full height appearance that must me done on the #wrap div for bot columns.

    Currently the left column gets it's color from this image

    which is set as repeat-y on the wrap div.
    Code:
    #wrap {
        min-width:800px;
        min-height:100&#37;; /*height is determined from parent's height (html & body)*/
        margin:-100px auto 0;/*pull footer back into viewport with negative top margin*/      
        background:#FFF url(images/faux.jpg) repeat-y 0 0;
    }
    The main (right column) gets it's color from the #FFF shown above.

    You will need to make a new image to change the color of the left column.

    To get rid of the dotted red border just remove it from #content, I had made a note in the CSS that it was just to show that floats are being contained.

    That is what I meant by "full height appearance" in my first post.

  12. #12
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Rayzur, now I can run this css style wonderful.
    That's a great code written by you.


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
  •