It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index ‹ Programming ‹ CSS Forum

dynamically sized inline div

Post a reply

dynamically sized inline div

Postby exciderenox on Wed Apr 23, 2008 5:25 pm

Hello,

I'm trying to set the height of a div to 100% of the *remaining* container, however, my css-foo is weak.

I've built a bit of HTML to illustrate my point:
Code: Select all
    <style type="text/css">
        *{padding: 5px;margin: 5px;}
        html{height: 100%;}
        body{height: 100%;}
    </style>
    <div id="container" style="height: 100%; background-color: Red;">
        <div id="header" style="height: 100px; background-color: Blue;">
        </div>
        <div id="content" style="height: 100%; background-color: Green;">
        </div>
    </div>


I would like to make the green div not extend outside the red div (no scrollbar).

I also cannot use "overflow:hidden" because i need to center somthing inside the green div afterwards.

the more complicated example (in process) is up here: http://smallnet.org/Gallery.aspx incase anybody is interested.

Thank you very much in advance.
exciderenox
 
Posts: 5
Joined: Wed Apr 23, 2008 5:16 pm
Top

Postby rangana on Thu Apr 24, 2008 2:46 am

It's because your CSS is causing this issue :)

This code:
Code: Select all
*{padding: 5px;margin: 5px;}

Means adding a padding of 5px and a margin of 5px on all the element (*)...which in turn gives you a gap of 10px...

The fix is to use the normal CSS reset instead:
Code: Select all
*{padding: 0px;margin: 0px;}


...and if you want to have a margin and padding of 5px...decide where to place it...if I were to ask, I'll place it in the body element ;)
Code: Select all
body{height: 100%;margin:5px;padding:5px;}


Hope that sort things out :)
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines
Top

Postby exciderenox on Thu Apr 24, 2008 3:55 pm

Hello Rangana,

first, thank you for responding.

I actually added that padding after the fact to help illustrate my point. without it, you could not see the red div at all.

The problem is that the green div, "content",extends past the bottem of its parent, the container div. This also causes there to be a scroll bar, which should not be needed.

I've posted the sample code up here:
http://smallnet.org/csssample.html

Screenshot of expected:
Image

Screenshot of actual:
Image

I hope this helps to clarify.

Thank you again, very much.

-Exciderenox
exciderenox
 
Posts: 5
Joined: Wed Apr 23, 2008 5:16 pm
Top

Postby rangana on Thu Apr 24, 2008 11:39 pm

This should fix it:
Code: Select all
<!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>
  <title>css sample</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <style type="text/css">
    *{padding: 0px;margin: 0px;}
    html{height: 100%;}
   body{height:100%;background:#f00;}
    #container{height: 100%;}
   #header{height:100px;background:#00f;margin:5px;}
   #content{height:100%;margin:5px;background:#092;}
  </style>
</head>
<body>
  <div id="container">
    <div id="header">Header: Fixed height of 100px</div>
    <div id="content">Content: Dynamic height of 100%</div>
  </div>
</body>
</html>
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines
Top

not quite...

Postby exciderenox on Thu Apr 24, 2008 11:44 pm

Hello, and thank you again.

Changing the background to red doesn't actually solve the problem. i made the background, and 2 divs different colors to help illustrate the problem.

I need the green div to be smaller, i need it to not overflow outside of its parent.

the code provided in your response imatates the results I need, but the scrollbar give it away. there shouldn't be one.

Thanks,
Exciderenox
exciderenox
 
Posts: 5
Joined: Wed Apr 23, 2008 5:16 pm
Top

Postby rangana on Thu Apr 24, 2008 11:49 pm

"Imitation" is also one of the best way to achieve cross-browser rendering ;)

...It may not be logically using your planned layout...but then..if the output is correct...and when it shows perfectly as planned...then why not shift to the imitation? :)

...If I were to ask...I would make the green div's height not 100%..but lesser than it..for in theory...height:100% is basing upon the container's height, it will always be basing on the height of body and html element which height was set to 100%.

...If you had problem with regards to the "actual" rendering of this code snippet...then link us to the "actual" page...we'll try to figure this one out for you :)
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines
Top

Okay then

Postby exciderenox on Fri Apr 25, 2008 12:01 am

on to imitation! :D

here is the actual page. in order to get past some javascipt checks, you will need to install Silverlight.
http://smallnet.org/Gallery.aspx

the CSS gets a little complicated so I build that sample to try and make is simpler.

in the center of the page, there is a image viewing applet. i want this applet to dynamically expand to make use however much browser real estate is available.

I accomplished this by setting all the heights and widths to 100%. everything looks good except:
1) the top of the browser is ~80px lower than it should be if it we appropriately centered
2) there should be no scroll bar.

Thank you again.
exciderenox
 
Posts: 5
Joined: Wed Apr 23, 2008 5:16 pm
Top

Fixed it!

Postby exciderenox on Mon Apr 28, 2008 6:48 pm

Hey all,

So over the weekend, I gave up trying to be pure in my CSS as suggested. I wrote a little JS to solve the problem for me. The final product is here: http://smallnet.org/Gallery.aspx?g=2.

Here is the JS:
Code: Select all
    <script type="text/javascript">
        window.onresize = resizePageContent;
        window.onload = resizePageContent;
        function resizePageContent()
        {
            var headerHeight =
                document.getElementById('masthead').clientHeight +
                document.getElementById('nav').clientHeight +
                document.getElementById('page_content').offsetTop;
            var width = 0; var height = 0;
                  if( typeof( window.innerWidth ) == 'number' ) {
                    //Non-IE
                    width = window.innerWidth;
                    height = window.innerHeight;
                  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                    //IE 6+ in 'standards compliant mode'
                    width = document.documentElement.clientWidth;
                    height = document.documentElement.clientHeight;
                  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                    //IE 4 compatible
                    width = document.body.clientWidth;
                    height = document.body.clientHeight;
                  }
                 
            var pageWidth = document.getElementById('page_content').clientWidth;
            var borderWidth = document.getElementById('border_left').clientWidth;
            document.getElementById('page_content').style.height = (height-headerHeight) +"px"; 
            document.getElementById('SilverlightControlHost').style.width=(width-(borderWidth*2)) +"px";
            document.getElementById('SilverlightControlHost').style.left=(((width-pageWidth-(borderWidth*2))/2)*-1) +"px";
        }
   
    </script>


-Exciderenox
exciderenox
 
Posts: 5
Joined: Wed Apr 23, 2008 5:16 pm
Top

Postby rangana on Tue Apr 29, 2008 12:12 am

Glad to know you finally found the fix ;)
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines
Top
Post a reply

Who is online

Users browsing this forum: No registered users and 0 guests