CSS - Possible To Fill Remainder Of Containing Div With Inner Div?

Suppose I have the following script that creates a div element and set its width and height to fill the whole screen:

Code:

<script type="text/javascript">
	var oDiv = document.createElement('div');
	oDiv.style.width = window.screen.availWidth + "px";
	oDiv.style.height = window.screen.availHeight + "px";
	//oDiv.style.width = window.screen.width + "px";
	//oDiv.style.height = window.screen.height + "px";
	oDiv.style.border = "solid 1px #ccc";
	document.body.appendChild(oDiv );
</script>

well, the code above actually does the job, BUT a scrollbar (vertical and horizontal) is also created ... how to get rid of the scrollbars?

Pretty Common issue.... I think...

I need my div's background to go all the way down the page.... even on small pages!!

Here is an example...

Sign Up Page

i put a div container around all my divs (so i could center them and put a bg and border) and put height at 100% but it only stretches from the top of the viewable page to the bottom. if a text content div stretches beond the page (and i have to scroll) the main content div cuts off. i set body height to 100% also. i cant figure out a way around this other than set the height in PX but since the content will be includes i have no way of know how much will be on each page. is there anyway around this, even if i have to use tables.

Here's my CSS
Code:

 #header {
        position: fixed;
        left: 0;
        width: 100%;
        height: 125px;
        top: 0;
        background-color: #ccffcc;
		background-image: url(images/topbackground2.jpg);
		}

Here's my HTML
Code:

<div id="header" >
<img src="images/spacefiller.jpg" align="left">
<a href="mainFrame.html" target="mainFrame"><img src="images/trial3.jpg" border="0" id="courseAssistant" align="left"/></a >
<img src="images/blend.gif" width="100%" height="20px" style="position: absolute;left: 122px;top:125px; ">
</div>

The problem is that I want the <img src=blend> to stretch the width of the div. The image is only 1px wide so I need it to stretch to fill up the header. The code I have works perfect for Mozilla but it won't work with IE. In IE the img stretches 122px farther than the div and causes there to be horizontal scroll bar at the bottom. I can't seem to figure this one out. Thanks in advance for the help and suggestions.

How do i set a font outline color as red and the fill with white using css. Does anyone know?

I just can't do it!!!! I need help on this..

My header.. I can't get rid of the spaces around the image..

hmm check this out.. I can't post a link direct but its on the world wide web at
piedmontred (dot) com

firebug is telling me its an element.style margin, but for the life of me I can't find that in any CSS sheet I have.. and for some reason firebug doesn't identify a sheet either..

I did buy this wordpress template and have done quite a bit of CSS hacks, but I just can't figure this one out..

Thanks for any help!!
Todd

if you didnt understand the subject i'll try and explain it a bit better here!

This is my problem in IE my page looks like this
http://www.readyflowers.com.au/div-fill.gif

But what i want is when there is no content for those divs not to appear so it would look like this (In firefox it works!)
http://www.readyflowers.com.au/div-fill-firefox.gif

apologies if this has been asked and answered already - i did a search of the board but didn't find a clear solution.

what i'm trying to do seems simple enough, but isn't turning out that way.

lets say i have a page background of some color (e.g., orange).

then i have a main container div that is centered with auto margins, and has a white background.

i want this main container to start at 100px from the top (so 100px of orange shows above it), and the white background should expand to the bottom of the page - without scrollbars. if i set it's height to 100%, the 100px top margin is added to the 100% height of its parent (body + html), so it acts as if there's 100px of substance beneath the viewport and therefor shows scrollbars.

i had assumed a negative bottom margin set for the same amount as the top margin would work, but alas it does not.

obviously i don't want to just force-hide scrollbars by overflow:hidden or position:asbolute/fixed - if content in the container forces it to expand, it should do that. otherwise, even if there's very little content - or even none - it should expand to the bottom of the page.

i've attached a very basic (non-working) example - any insight would be appreciate.

not looking for a hack - i'm looking for the best way to handle this with best-practices.

tyia

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" xmlns:v="urn:schemas-microsoft-com:vml" > 
<head>
	
	<style type="text/css">
		html {
			height : 100%;
		}		
		body {
			margin : 0;
			background : #F90;
			height : 100%;
		}		
		div.wrapper {
			margin : 100px auto -100px auto;
			width : 500px;
			background : #FFF;
			height : 100%;
		}
	</style>
	
</head>

<body>

	<div class="wrapper">
		
	</div>
	
</body>

</html>

Hi there,
I'm making a CakePHP application to display my friend's artwork. I'm having trouble with the style sheet though. The header and footer are made of two fading images. I've used the background image property to stretch these images to fill the divs and have made the divs stretch to fill the width of the page.

At this point it's probably easiest to see what I mean by taking a look for yourself-

http://www.seb.webege.com/paintings/gallery

If you view this page in Chrome or Firefox then you'll see the desired effect with the image filling the width of the page. The problem comes with Safari and IE. In these browsers the image does not stretch to fill the screen.

I am not an expert at HTML/CSS and can't for the life of me work out what has gone wrong or what I can do to fix it, after numerous google searches I'm still none the wiser and I'm just not seeing the problem.

Can anyone advise me how to get the images to stretch to the browser width in Safari and Explorer? Any help would really be appreciated.

Many thanks,

Nick

I've exhausted my own knowledge toolbox and cannot get this to work. I'm trying to get a div to expand to the end of the parent div.

http://www.pictouunited.com/?s=null

You'll see what I mean. I've done all the logical troubleshooting, or so I thought.

I appreciate any help in advance!

I'm trying to create an image that will adjust to fit the screen size and always be at least 100% of the screen.

Basically, I'm looking to have the "trunk" image in the LeftBody div, always stretch to reach the image in the banner and the footer. If I have enough content, the image will repeat just fine and fill my needs, but if there is no content, how can i make the image fit the page?

My code is accessible via the /Samples/ directory.

Thanks so much...

midcitybrewery.com/Samples/sample.html

Hello, Below is css I am trying to get to work and use as a template for a two column , header, and footer layout. I can get by with css, but an not a designer so can't figure out the exact specifics on how to do this. I've looked at many sites, make examples, javascripts included, but either they are to hard to fit into what I am looking for or just cause me to hit my head against the wall.

I'm trying to get the left columns background to fill height 100% to the footer. The content's doesn't need it because the wrapper's background act's as its color. Also, if either column's height changes past the screen's height. I need the footer to move down too. Currently, I tested if the left-column and the main content goes past the screen's height it will just go past the footer. This works beacuse the css I have currently is making sure that the footer is always at the bottom.

Code:

<html >
<head>
    <title>Untitled Page</title>    
    <style type="text/css">
        html {
        overflow-y: scroll; /* forces firefox scrollbar on */
        }

        body {
        margin: 0;
        padding: 0;
        background: #F2F2F2;
        font: 100% Helvetica, Arial, sans-serif;    
        height: 100%;
        
        }

        /* text-align: center; is so that the content will float in the center*/
          div.wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: left;      
        margin-bottom:  42px;
        }
                                     
        div.header {
        position: relative;
        width: 100%;
        background-color: blue;
        border-bottom: 1px solid #CCCCCC;
        font-size: 1.5em;
        height: 42px;
        }
        
        div.footer {
        position: absolute; bottom: 0;
        width: 100%;
        background-color: blue;
        border-bottom: 1px solid #CCCCCC;
        font-size: 1.5em;
        height: 42px;
        }      

        div.wrapper .left {
        width: 215px;
        float: left;
        background: yellow;
        height: 100%;
        min-height: 100%;  
         
        }
        div.wrapper .right {
               width:auto;
               margin-left: 215px;               
       }    
       
       div.wrapper .tabs {
        background: green;
        height: 35px;
        
       }
       
       div.wrapper .mainContent {
           
       }   
    </style>
</head>
<body>         
    <div id="header" class="header">header</div>
	    <div class="wrapper">
		    <div id="leftColumn" class="left">left content</div>
		    <div class="right">
		        <div class="tabs">Tabs go here</div>
		        <div class="mainContent">Main content goes  here</div>
		    </div>		   
	    </div>	    
    <div id="footer" class="footer">footer</div>
</body>
</html>

Any help would be appreciated thanks in advance.


Risso

Page set up is as folows:
1)At the top is a panel 750x200 to hold an image
2)under that is a panel.
3)Followed by a container that contains the Lnav div and the data div which are to be next to each other. How can I these two to stretch to fill the browser? and stretch further together when the data exceeds.
4)Under this are 2 more panels one below the other.

Code:

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    text-align: center;
    min-height: 400px; /* For Mozilla/Opera/Safari */
}

#Container {
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 750px;
    height: 100%;
    background: #ccc;
}


#Content {
    margin: 0 auto;
    text-align: left;
    width: 750px;
    min-height: 100%;
    height: auto;
    background: #666;
}



#top {text-align: left; width: 750px; height: 250px;  background: red;}
#page {text-align: right; width: 750px; background: green; }
#lNav {text-align: left; float: left; width: 150px; min-height: 100%; height: auto; background: orange; position: relative; margin: 0 auto;}
#data {text-align: left; float: left; width: 600px; min-height: 100%; height: auto; background: yellow; position: relative; margin: 0 auto;}
#bNav {text-align: center; width: 750px; background: blue;}
#bottom {text-align: right; width: 750px; background: purple;}

/* Hack for IE */
* html #Content{
    height: 100%;
}
/* End IE Hack */

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<LINK REL=stylesheet HREF="container.css" TYPE="text/css">
</head>
<body>

  <div id="Container">
    <div id="top">top</div>
    <div id="page">page</div>
    <div id="Content">
      <div id="lNav">lNav</div>
      <div id="data">data</div>
    </div>
    <div id="bNav">bNav</div>
    <div id="bottom">bottom</div>
  </div>

</body>
</html>

http://www.ilumos.co.uk/site/
http://www.ilumos.co.uk/site/styleDefault.css

Ok, I'm trying to make a page layout for my site, and on the left I have a navigation bar (#sidebar), which I'd like to fill the whitespace between it and the footer (#footer) (but not dissapear behind the footer, height: 100%). I'd also like to fill the whitespace between the left of the main (#main) div and the edge of the page, and the whitespace under the div too.

If there's a non-hacky solution to this I'd love to hear it, but if there isnt, and there's a way to change my CSS/HTML to get the same result I'd still be interested.

Thanks loads,

ilumos

Hi Folks,

I'm having problems with some of the divs on my site. Here is the site with the problem areas colorized to highlight the issue...

example

I have 3 columns, but the problem arises in the area marked "panel2". I want the div containing this text to stretch to fill the remaining available space so that the border-left attribute reaches the footer, encapsulating the text in the middle column.

I can't use the border-right attribute of the middle column because of the small indent between panels 1 and 2. I've scoured forums and googled till my fingers hurt, but can't seem to come up with a satisfactory explanation as to why I can't do this.

the CSS is he
styles.css

Any help/suggestions or comments would be appreciated more than I can describe!!

Thanks in advance!!