Jump to content

Window height varies depending on the height of footer

toldigabor

By toldigabor
in CSS

Recommended Posts

toldigabor Newbie

toldigabor

Posted
Posted

How can I do that if you have a fixed height and width of my DIV, then the underlying footer (also a fixed-width) of the window size vary according to the height of the goal is to completely fill the window.There is a code.If the content does not reach beyond the height of the DIV to the lower background, the lower the background DIV "stick" to the bottom of the browser (as I wanted).Unfortunately, when the content DIV is too high you do not. How could this be the problem?I would like if the yellow part of touching the very bottom of my browser (the background-color is trasparent, to transparently behind the wallpaper - large background image and lower background image).The blue part is an essential part of the site where the content is.The red part is the large background, which is not repeated.The smaller is the yellow wallpaper section, which repeats itself. This would recur until then, until the blue part lasts.Unfortunately, when the content DIV is too high you do not.If you try to reproduce the text in many of the named DIV content, you can not touch the bottom of your browser to the yellow DIV. This is when the blue DIV outreach at the bottom of the yellow DIV. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head>  <title>Weblap structure</title>  <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body style="margin: 0; padding: 0; text-align: center">  <div style="width: 100%; height: 600px; margin: 0 auto; background-color: red;">Large Background Image (no-repeat)</div>  <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; top: 600px; width: 100%; margin: 0 auto; background-color: yellow;">Lower background image (repeatly - vertically reflecting)</div>  <div style="position: absolute; width: 700px; left: 0px; right: 0px; top: 50px; margin: 0px auto; background-color: blue">   1. Website content (originally background-color: transparent)<BR>   2. Website content<BR>   3. Website content<BR>   4. Website content<BR>   5. Website content<BR>   6. Website content<BR>   7. Website content<BR>   8. Website content<BR>   9. Website content<BR>   10. Website content<BR>   11. Website content<BR>   12. Website content<BR>   13. Website content<BR>   14. Website content<BR>   15. Website content<BR>  </div> </body></html>

Link to comment
Share on other sites
ApocalypeX Member

ApocalypeX

Posted
Posted

I'm not totally sure what you're talking about and mind you its 3am, but this is what I think you want.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>  <title>Weblap structure</title>  <meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body style="margin: 0; padding: 0; text-align: center; min-height:100%; height:100%;">  <div style="width: 100%; min-height: 100%; height:100%; margin: 0 auto; background-color: red; padding-top:50px">Large Background Image (no-repeat)  <div style="position:relative; width: 700px; height:800px; left: 0px; right: 0px; margin: 0px auto; background-color: blue">   1. Website content (originally background-color: transparent)<BR>   2. Website content<BR>   3. Website content<BR>   4. Website content<BR>   5. Website content<BR>   6. Website content<BR>   7. Website content<BR>   8. Website content<BR>   9. Website content<BR>   10. Website content<BR>   11. Website content<BR>   12. Website content<BR>   13. Website content<BR>   14. Website content<BR>   15. Website content<BR>  </div>   <div style="position: relative; top: 100%; width: 100%; margin: 0 auto; background-color: yellow;">Lower background image (repeatly - vertically reflecting)</div>   </div></body></html>

Link to comment
Share on other sites
toldigabor Newbie

toldigabor

Posted
  • Author
Posted

I would like if yellow DIV behave that fill the remaining space always. Regardless of screen resolution.Try the original code. If you change the window height then the red DIV height does not change and The yellow DIV height change. This goal, target, destination!BUT paste has 30 lines in the blue DIV: the blue DIV go beyond (outwalk) below (underfoot) on the yellow DIV. This is the problem! If too many content in the blue DIV then already don't fill the remaining space the yellow DIV. :)

I'm not totally sure what you're talking about and mind you its 3am, but this is what I think you want.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>  <title>Weblap structure</title>  <meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body style="margin: 0; padding: 0; text-align: center; min-height:100%; height:100%;">  <div style="width: 100%; min-height: 100%; height:100%; margin: 0 auto; background-color: red; padding-top:50px">Large Background Image (no-repeat)  <div style="position:relative; width: 700px; height:800px; left: 0px; right: 0px; margin: 0px auto; background-color: blue">   1. Website content (originally background-color: transparent)<BR>   2. Website content<BR>   3. Website content<BR>   4. Website content<BR>   5. Website content<BR>   6. Website content<BR>   7. Website content<BR>   8. Website content<BR>   9. Website content<BR>   10. Website content<BR>   11. Website content<BR>   12. Website content<BR>   13. Website content<BR>   14. Website content<BR>   15. Website content<BR>  </div>   <div style="position: relative; top: 100%; width: 100%; margin: 0 auto; background-color: yellow;">Lower background image (repeatly - vertically reflecting)</div>   </div></body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

are you taking about a sticky footer effect?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">html{height:100%;}</style></head><body style="margin: 0; padding: 0; text-align: center; min-height:100%; height:100%;"><div style="width: 100%; min-height: 100%; height:100%; margin: 0 auto; background-color: red; padding-top:50px">Large Background Image (no-repeat)<div style="position:relative; width: 700px; left: 0px; right: 0px; margin: 0px auto; background-color: blue; height:100%;">1. Website content (originally background-color: transparent)<BR>2. Website content<BR>3. Website content<BR>4. Website content<BR>5. Website content<BR>6. Website content<BR>7. Website content<BR>8. Website content<BR>9. Website content<BR>10. Website content<BR>11. Website content<BR>12. Website content<BR>13. Website content<BR>14. Website content<BR>15. Website content<BR></div><div style="position: fixed; bottom:0; left:0; width: 100%; margin: 0 auto; background-color: yellow;">Lower background image (repeatly - vertically reflecting)</div></div></body></html>

this will not work for ie6

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

with ie6 fix

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css"></style><!--[if lt IE 7]><style type='text/css'>body { height: 100%; overflow: auto; overflow-x: hidden; width:100%;}html{ height: 100%; overflow-y: hidden;}</style><![endif]--></head><body style="margin: 0; padding: 0; text-align: center; height:100%;"><div style="width: 100%; min-height: 100%; height:100%; margin: 0 auto; background-color: red; padding-top:50px">Large Background Image (no-repeat)<div style="width: 700px; margin: 0px auto; background-color: blue; height:100%;">1. Website content (originally background-color: transparent)<BR>2. Website content<BR>3. Website content<BR>4. Website content<BR>5. Website content<BR>6. Website content<BR>7. Website content<BR>8. Website content<BR>9. Website content<BR>10. Website content<BR>11. Website content<BR>12. Website content<BR>13. Website content<BR>14. Website content<BR>15. Website content<BR>1. Website content (originally background-color: transparent)<BR>2. Website content<BR>3. Website content<BR>4. Website content<BR>5. Website content<BR>6. Website content<BR>7. Website content<BR>8. Website content<BR>9. Website content<BR>10. Website content<BR>11. Website content<BR>12. Website content<BR>13. Website content<BR>14. Website content<BR>15. Website content<BR>1. Website content (originally background-color: transparent)<BR>2. Website content<BR>3. Website content<BR>4. Website content<BR>5. Website content<BR>6. Website content<BR>7. Website content<BR>8. Website content<BR>9. Website content<BR>10. Website content<BR>11. Website content<BR>12. Website content<BR>13. Website content<BR>14. Website content<BR>15. Website content<BR>1. Website content (originally background-color: transparent)<BR>2. Website content<BR>3. Website content<BR>4. Website content<BR>5. Website content<BR>6. Website content<BR>7. Website content<BR>8. Website content<BR>9. Website content<BR>10. Website content<BR>11. Website content<BR>12. Website content<BR>13. Website content<BR>14. Website content<BR>15. Website content<BR></div><div style="position: fixed!important; position: absolute;  bottom:0; left:0; width: 100%; margin: 0 auto; background-color: yellow;">Lower background image (repeatly - vertically reflecting)</div></div></body></html>

Link to comment
Share on other sites
toldigabor Newbie

toldigabor

Posted
  • Author
Posted

Not what I thought.Although it work same as in my first post the code.Regardless of how much content in the blue DIV. The yellow DIV fill the remaining space always.Watch the yellow DIV in this code and in the first post's code. Compare behave of 2 yellow DIV.There is a white part in the browser, below the yellow DIV. I would like if there is no. I would like there is also yellow (originally a repeatly background image)In the code of first post: no white, just yellow. But because too many content in the blue DIV so there is white part (unfortunately).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head>  <title>Weblap structure</title>  <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body style="margin: 0; padding: 0; text-align: center">  <div style="width: 100%; height: 600px; margin: 0 auto; background-color: red;">Large Background Image (no-repeat)</div>  <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; top: 600px; width: 100%; margin: 0 auto; background-color: yellow;">Lower background image (repeatly - vertically reflecting)</div>  <div style="position: absolute; width: 700px; left: 0px; right: 0px; top: 50px; margin: 0px auto; background-color: blue">   1. Website content (originally background-color: transparent)<BR>   2. Website content<BR>   3. Website content<BR>   4. Website content<BR>   5. Website content<BR>   6. Website content<BR>   7. Website content<BR>   8. Website content<BR>   9. Website content<BR>   10. Website content<BR>   11. Website content<BR>   12. Website content<BR>   13. Website content<BR>   14. Website content<BR>   15. Website content<BR>   1. Website content (originally background-color: transparent)<BR>   2. Website content<BR>   3. Website content<BR>   4. Website content<BR>   5. Website content<BR>   6. Website content<BR>   7. Website content<BR>   8. Website content<BR>   9. Website content<BR>   10. Website content<BR>   11. Website content<BR>   12. Website content<BR>   13. Website content<BR>   14. Website content<BR>   15. Website content<BR>   1. Website content (originally background-color: transparent)<BR>   2. Website content<BR>   3. Website content<BR>   4. Website content<BR>   5. Website content<BR>   6. Website content<BR>   7. Website content<BR>   8. Website content<BR>   9. Website content<BR>   10. Website content<BR>   11. Website content<BR>   12. Website content<BR>   13. Website content<BR>   14. Website content<BR>   15. Website content<BR>   1. Website content (originally background-color: transparent)<BR>   2. Website content<BR>   3. Website content<BR>   4. Website content<BR>   5. Website content<BR>   6. Website content<BR>   7. Website content<BR>   8. Website content<BR>   9. Website content<BR>   10. Website content<BR>   11. Website content<BR>   12. Website content<BR>   13. Website content<BR>   14. Website content<BR>   15. Website content<BR>   1. Website content (originally background-color: transparent)<BR>   2. Website content<BR>   3. Website content<BR>   4. Website content<BR>   5. Website content<BR>   6. Website content<BR>   7. Website content<BR>   8. Website content<BR>   9. Website content<BR>   10. Website content<BR>   11. Website content<BR>   12. Website content<BR>   13. Website content<BR>   14. Website content<BR>   15. Website content<BR>  </div> </body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Still not exactly sure what you are looking for?, if below is not what you require. please supply images of what you expect with small amount of text, and then large amount of text in content area.sorry had to use javscript to get desired results, but works in most browsers I think?...I hope!

<!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>Weblap structure</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <script type="text/javascript"> /*<![CDATA[*//*---->*/ function checkheight() { var wrapperheight = document.getElementById("wrapper").offsetHeight; var bodyheight = document.body.offsetHeight;  if(wrapperheight < bodyheight) { document.getElementById("wrapper").style.height="100%"; } else document.getElementById("wrapper").style.minHeight="100%";  } window.onload=checkheight;  /*--*//*]]>*/ </script>  <style type="text/css">html{ height:100%;}body {height:100%; overflow:visible; margin: 0; padding: 0; text-align: center; background-color: red; background:url(clonewars_body.jpg) center top; color:#fff;} /*assign Large Background Image to body*/#wrapper {position: relative; width: 100%; overflow:hidden;} #content  {width:700px; background-color:blue; min-height: 100%; margin: 50px auto 0 auto; padding-bottom:210px;} /*padding-bottom is the spacing that the height of the footer would occupy*/#footer {position: absolute; width: 100%; background-color: yellow; bottom: 0px; color:#000; left:0; height:200px;}</style><!--[if lt IE 7]><style type='text/css'>#content  {height: 100%;}</style><![endif]-->      </head> <body>  <div id="wrapper">   <div id="content"> 	9. Website content<br />	10. Website content<br />	11. Website content<br />	12. Website content<br />	4. Website content<br />	5. Website content<br />	6. Website content<br />	7. Website content<br />	8. Website content<br />	9. Website content<br />	10. Website content<br />	11. Website content<br />  </div>    <div id="footer">Lower background image (repeatly - vertically reflecting)</div>    </div>  </body> </html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...