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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to RESIZE DIV to 100% height of page minus another DIV height

    Hi, I need to re-size a div to be 100% of the browser but taking into account the height of an existing header div.

    Currently it works but it doesn't factor the height of the above header div, and therefore scrolls off the page (the height of the header div)

    I need to manipulate ( subtract the height value of the header) in the javascript somehow.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    
    <script type="text/javascript">
    function SetHeightOfDiv(){
    var theDiv = document.getElementById('content');
    theDiv.style.height = BrowserHeight()+"px";
    }
    
    function BrowserHeight() {
    var theHeight;
    if (window.innerHeight) {
    theHeight = window.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight) {
    theHeight = document.documentElement.clientHeight;
    }
    else if (document.body) {
    theHeight = document.body.clientHeight;
    }
    return theHeight;
    }
    </script>
    </head>
    
    <body style="height:100%; background-color:blue; margin:0; padding:0; color:#ffffff; font-size:15px; text-align:center; font-family:monospace,arial"
    onload="SetHeightOfDiv()">
    
    <div id="wrapper" style="height:100%; width:900px; background-color:yellow; margin-left:auto; margin-right:auto; overflow:hidden">
    
    <div id="header" style="margin-top:0px; height:130px; width:890px; margin-left:5px; background-color:red; position:fixed">
    <p>The FIXED HEADER</p>
    </div>
    
    <div id="content" style="margin-top:132px; background-color:grey; width:890px; margin-left:5px">
    <p>THE BODY - that extends below the browser window (possibly the height of the header)</p></br>
    <p>So how do we manipulate the Javascript to 'Subtract' the height of the HEADER?</p></br>
    
    <p style="text-align:left; padding-left:10px">
    function SetHeightOfDiv(){ <br>
    var theDiv = document.getElementById('content');<br>
    theDiv.style.height = BrowserHeight()+"px";<br>
    }<br>
    </br>
    function BrowserHeight() {<br>
    var theHeight;<br>
    if (window.innerHeight) {<br>
    theHeight = window.innerHeight;<br>
    }<br>
    else if (document.documentElement && document.documentElement.clientHeight) {<br>
    theHeight = document.documentElement.clientHeight;<br>
    }<br>
    else if (document.body) {<br>
    theHeight = document.body.clientHeight;<br>
    }<br>
    return theHeight;<br>
    }</p>
    </div>
    
    </div> <!--end of wrapper-->
    </body>
    </html>
    Thanks
    Last edited by Greatkiwi; 03-15-2012 at 12:46 AM.

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    I would do something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                html,body{
                    height: 100%;
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                }
                #header {
                    height: 50px;
                    border: 1px solid green;
                }
                #content{
                    border: 1px solid red;
                }
            </style>
            <script type="text/javascript">
                function setDivHeight(){
                    contentO.style.height = (document.body.clientHeight - headerO.clientHeight - (2*getBorderWidth(contentO)) - (2*getBorderWidth(headerO)))+'px';
                }
                function getBorderWidth(elem){
                    try{
                        var borderWidth = parseInt(getComputedStyle(elem, '').getPropertyValue('border-top-width'));
                    } catch(e){
                        var borderWidth = parseInt(element_reference.currentStyle.borderWidth);
                    }
                    return borderWidth
                }
                window.onload=function(){
                    contentO = document.getElementById('content');
                    headerO = document.getElementById('header');
                    setDivHeight();  
                }
                window.onresize=setDivHeight;
            </script>
        </head>
        <body>
            <div id="header">Header bar</div>
            <div id="content">Content container</div>
        </body>
    </html>
    But I don't see why you want to resize the div like this. What happens if the user resizes their window to a small size such that the content no longer fits in the div?

    Also, note that clientHeight does not take any margins into account so if you have any, you will need to cater for them similarly to how I accounetd for the border in the css, which clientHeight also does not take into account. You could try offsetHeight but in my experience it doesn't always do what its supposed to do.
    Last edited by webdev1958; 03-15-2012 at 02:47 AM.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by webdev1958 View Post
    But I don't see why you want to resize the div like this. What happens if the user resizes their window to a small size such that the content no longer fits in the div?

    Also, note that clientHeight does not take any margins into account so if you have any, you will need to cater for them similarly to how I accounetd for the border in the css, which clientHeight also does not take into account. You could try offsetHeight but in my experience it doesn't always do what its supposed to do.
    This is for an existing social networking site with dynamic content, and the structure of the div's has to be as mentioned above. (I assume the doc type needs to be the same also).

    The purpose is mainly for aesthetics by creating a "Content div" within a "wrapper" that stretches 100% of the viewport - as the wrapper does also.

    This way I can specify nice background colors for the wrapper that gives a border effect around the content div, and so the content div wont 'pull up' exposing the wrapper background color below it if there is no user content.

    The content then sits below the "fixed" header.. so that if the user viewport becomes full then Scrollbar-Y appears and it scrolls up under the header.

    The site does all this already - except for stretching the content div to the bottom.

    So the structure must still maintain this:

    Code:
        <body>
            <div id="wrapper">
    	        <div id="header">Header bar</div>
    		<div id="content">Content container</div>
    	</div>
        </body>
    I tried your code and modified the html but couldn't get the scroll to appear if the content became full or browser minimised etc. Apologies I know little about js sorry. Thanks for your input so far.
    Last edited by Greatkiwi; 03-15-2012 at 05:32 AM.

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    It's only a couple of minor tweaks:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                html,body,#wrapper{
                    height: 100%;
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                }
                #header {
                    height: 50px;
                    border: 1px solid green;
                }
                #content{
                    border: 1px solid red;
                    overflow: auto;
                }
            </style>
            <script type="text/javascript">
                function setDivHeight(){
                    contentO.style.height = (wrapperO.clientHeight - headerO.clientHeight - (2*getBorderWidth(contentO)) - (2*getBorderWidth(headerO)))+'px';
                }
                function getBorderWidth(elem){
                    try{
                        var borderWidth = parseInt(getComputedStyle(elem, '').getPropertyValue('border-top-width'));
                    } catch(e){
                        var borderWidth = parseInt(elem.currentStyle.borderWidth);
                    }
                    return borderWidth
                }
                window.onload=function(){
                    wrapperO = document.getElementById('wrapper');
                    contentO = document.getElementById('content');
                    headerO = document.getElementById('header');
                    setDivHeight();  
                }
                window.onresize=setDivHeight;
            </script>
        </head>
        <body>
            <div id="wrapper">
                <div id="header">Header bar</div>
                <div id="content">
                    Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel. 
                    Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce 
                    pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut, 
                    ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id, 
                    aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor, 
                    volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec 
                    ante sed, ac turpis dis dui vestibulum aut.<br /><br />
    
                    Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante 
                    turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc 
                    posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede 
                    voluptas libero, sed mauris tincidunt, ultrices praesent. Iaculis vivamus sapien id, lorem ante aliquet, commodo pede imperdiet 
                    congue, dictum integer eget sed orci. Suscipit vitae quis, massa elit faucibus massa, interdum nam pharetra nulla sed, sollicitudin 
                    egestas, magna viverra.<br /><br />
    
                    Vitae quis risus enim. Suspendisse a nulla a, vestibulum eros suspendisse. Magna wisi a ad molestie dolor. Quam vel mollis nulla 
                    pharetra. Qui congue inceptos ut vehicula, feugiat ultricies in pellentesque eu, eros aliquid vel nec dis, risus quis feugiat 
                    vestibulum praesent at. Ut nam aenean eu, etiam nonummy etiam tortor, arcu augue urna proident donec mattis praesent, vel commodo 
                    nulla habitasse sapien ullamcorper condimentum. Ipsum nunc leo dictum magna molestie enim, lacus est, ante habitasse scelerisque 
                    dolor leo sodales erat, tristique dapibus nulla vehicula elementum mauris velit, felis a est. Eget sit erat eget arcu donec, 
                    montes varius. Volutpat nisl ligula in. Suspendisse nullam dictum suspendisse, ante quam tortor at sed eu. Condimentum pulvinar 
                    vestibulum condimentum mattis, vehicula vivamus eget enim in, integer penatibus lobortis eu, wisi sit augue libero eget erat magnis, 
                    velit lacus nascetur rutrum sed ac. Sem rutrum vitae sollicitudin, mauris mauris sit wisi.<br /><br />
    
                    Et elit nunc, aliquam rhoncus, cras ante est ac consequat, vitae lacinia curabitur pellentesque ipsum bibendum gravida. Arcu in nisl. 
                    Vivamus etiam viverra morbi nunc, neque cras ut placerat id pulvinar eget, dolor vel pede nunc duis. Amet mi egestas porta, leo est 
                    nec et, suscipit sed ipsum mauris vitae. Libero vulputate massa perspiciatis laborum ipsum, leo parturient dapibus accumsan, nec 
                    viverra luctus a. Qui sit lorem scelerisque purus lectus, aptent habitant nunc turpis duis, malesuada a nam mi litora. Duis sapien 
                    felis, eu aute quis, elit dignissim hymenaeos vel.               
                </div>
            </div>
        </body>
    </html>
    Last edited by webdev1958; 03-16-2012 at 01:12 AM.


  •  

    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
    •