Results 1 to 9 of 9

Thread: CSS replacement for clientHeight?

  1. #1
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,718
    Thanks
    46
    Thanked 211 Times in 204 Posts
    Blog Entries
    51

    Default CSS replacement for clientHeight?

    The code below puts a green content div beneath a fixed red top bar whose dynamic height depends on the amount of text inside it. The top position of the content div and its height are calculated with the help of the clientHeight and window.innerHeight properties, see function position_content(). I wonder if it's possible to do this without javascript.
    Any ideas?
    Code:
    <style>
    body {padding:0; margin:0}
    #topbar {position: fixed; background: red; left: 0; top:0; right:0; text-align: center; padding: 20px; z-index: 1}
    #content {position: relative; background: green; padding: 20px; box-sizing: border-box;}
    </style>
    
    
    <div id="topbar" >
    <h1>Top bar</h1>
    This is the header This is the header This is the header This is the header This is the header This is the header This is the header This is the header This is the header This is the header This is the header 
    </div>
    
    <div id="content" >
    begin<br>content<br>content<br>end
    </div>
    
    <script>
    function position_content()
    {
    document.getElementById('content').style.top=document.getElementById('topbar').clientHeight+'px';
    document.getElementById('content').style.minHeight=window.innerHeight-document.getElementById('topbar').clientHeight+'px'
    }
    window.onload=position_content
    window.onresize=function(){position_content()}
    </script>

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,056
    Thanks
    1
    Thanked 194 Times in 191 Posts

    Default

    Hi there molendijk,

    "I wonder if it's possible to do this without javascript."
    It is possible to do it without "javaScript", using a little extra "HTML".

    Whether you consider it to be a hack or not is up to you, but it is
    bullet proof and it will work in all browsers...

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    body {
        padding: 0; 
        margin: 0
     }
    #copy{
        padding: 1.25em;
        opacity: 0;
     }
    #topbar {
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        right: 0; 
        padding: 1.25em;
        background: #f00;
        text-align: center; 
     }
    #content { 
        padding: 1.25em;
        background: #008000;
      }
    </style>
    
    </head>
    <body> 
    
    <div id="copy">
     <h1>Top bar</h1>
      Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit nulla vitae ante rhoncus, 
      id elementum nisi interdum. Integer sem quam, tincidunt nec quam ac, lobortis volutpat ipsum.Donec 
      eu imperdiet. 
    </div>
    
    <div id="topbar" >
     <h1>Top bar</h1>
      Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit nulla vitae ante rhoncus, 
      id elementum nisi interdum. Integer sem quam, tincidunt nec quam ac, lobortis volutpat ipsum.Donec 
      eu imperdiet. 
    </div>
    
    <div id="content" >
     <h2>content</h2>
      <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
       bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
       posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
       Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
       sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
       nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
       odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
       Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
       purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
      </p><p>
       Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
       purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum. 
       Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius, 
       nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
       penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique 
       varius ullamcorper.
      </p><p>
       Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non 
       vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu. 
       Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat. 
       Phasellus ac sem consequat lorem congue malesuada vitae vitae diam. Donec eu imperdiet 
       augue. Curabitur ullamcorper sit amet libero in ullamcorper. Donec sed laoreet quam. 
       Phasellus malesuada libero felis, non elementum ex tincidunt eget. Quisque cursus arcu vel 
       diam consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
      </p><p>
       In sapien massa, feugiat ut magna eu, hendrerit porttitor justo. In vitae massa ipsum. 
       Aliquam feugiat tortor sed diam facilisis, et molestie dolor blandit. Pellentesque non lectus 
       odio. Curabitur pulvinar orci vitae lorem bibendum volutpat. Duis congue dignissim ante ut 
       consequat. Sed nec sagittis neque, quis vehicula urna. Fusce laoreet interdum ligula vel 
       finibus. Nunc odio purus, dapibus sit amet orci eget, congue eleifend erat. Quisque porttitor 
       imperdiet ullamcorper. Aenean non orci nec magna tempor porta at id ipsum.
      </p><p>
       Cras euismod euismod nibh, nec hendrerit ante efficitur id. Donec sit amet interdum mauris. 
       Maecenas pellentesque, sem a commodo tincidunt, quam ex viverra nibh, non consectetur 
       odio quam et velit. Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit 
       nulla vitae ante rhoncus, id elementum nisi interdum. Integer sem quam, tincidunt nec quam 
       ac, lobortis volutpat ipsum. Curabitur nec turpis viverra, eleifend arcu non, egestas felis. 
       Etiam a eros felis. Aliquam nec ullamcorper enim. Donec sit amet commodo ante, vitae 
       consectetur sem. Proin ut luctus dolor. Integer lectus massa, maximus nec urna non, 
       ullamcorper hendrerit mi. 
      </p>
    </div>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  3. The Following User Says Thank You to coothead For This Useful Post:

    molendijk (04-19-2017)

  4. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,718
    Thanks
    46
    Thanked 211 Times in 204 Posts
    Blog Entries
    51

    Default

    Coothead, thanks very much. Your code works fine as far as the top position of the content div is concerned. But the content div does not fill the whole area beneath the red top bar. There's white space at the bottom.
    Of course, I could solve this by giving the body and the content div the same background-color, but I wanted the CSS (or the HTML) to not only correctly calculate the top position of the content div, but also its correct height (= the window's height minus the height of the top bar).
    My window's innerWidth: 1600px. My window's innerHeight: 736 px.

  5. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    437
    Thanks
    6
    Thanked 42 Times in 40 Posts

    Default

    Hello,
    Are you wanting something like this:
    https://jsfiddle.net/k4z9zgfr/5/
    In website:
    http://soloiestnetwork.000webhostapp...nCachebreakers

    I think I posted something about this before also.
    Last edited by Deadweight; 04-20-2017 at 01:55 AM.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  6. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,056
    Thanks
    1
    Thanked 194 Times in 191 Posts

    Default

    Hi there Deadweight,

    "Are you wanting something like this:"
    No, molendijk does not want a fixed height header.

    coothead
    ~ the original bald headed old fart ~

  7. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,056
    Thanks
    1
    Thanked 194 Times in 191 Posts

    Default

    Hi there molendijk,

    CSS, can not do your javascript calculations.

    But javascript is always more likely to be disabled than CSS.

    Personally, I tend to always look for non javascript solutions.

    coothead
    ~ the original bald headed old fart ~

  8. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,718
    Thanks
    46
    Thanked 211 Times in 204 Posts
    Blog Entries
    51

    Default

    Quote Originally Posted by Deadweight View Post
    I think I posted something about this before also.
    Yes, but that was about headers having a fixed height, see http://www.dynamicdrive.com/forums/s...ht=#post321491.

  9. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,718
    Thanks
    46
    Thanked 211 Times in 204 Posts
    Blog Entries
    51

    Default

    Quote Originally Posted by coothead View Post

    CSS, can not do your javascript calculations.
    Coothead, thanks anyway.
    I agree that CSS should be used wherever possible. Apparently, it's not possible in this case. But I like your hack.

  10. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,718
    Thanks
    46
    Thanked 211 Times in 204 Posts
    Blog Entries
    51

    Default

    People who want to know how and why Coothead's hack works may want to read this.

Similar Threads

  1. Help or Replacement of Marquee Tag
    By Jim Weinberg in forum JavaScript
    Replies: 4
    Last Post: 09-24-2013, 07:50 PM
  2. Resolved Doctype/clientHeight problem
    By Avarus in forum JavaScript
    Replies: 4
    Last Post: 01-11-2009, 03:28 PM
  3. Image Replacement
    By Johnny__Utah in forum JavaScript
    Replies: 0
    Last Post: 04-13-2008, 04:31 PM
  4. String Replacement
    By Titan85 in forum PHP
    Replies: 1
    Last Post: 04-13-2007, 08:23 PM
  5. Table replacement
    By viktor in forum HTML
    Replies: 5
    Last Post: 02-24-2006, 04:04 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
  •