473,699 Members | 2,196 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

how to extent divs to full height of viewport

dear group,

as nobody answered my recent posts (maybe they were too complicated) i
just ask you to help me on a rather simple issue: how can i stretch
divs to the full height of the viewport (in my case the browser
window)?

any help will be appreciated.
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"
Jul 20 '05 #1
2 5897
tomasio <da****@jan.e t> wrote:
how can i stretch
divs to the full height of the viewport (in my case the browser
window)?


body{margin:0;p adding:0}
html,body,div{h eight:100%}

--
Spartanicus
Jul 20 '05 #2
Spartanicus <me@privacy.net > schrieb:
tomasio <da****@jan.e t> wrote:
how can i stretch
divs to the full height of the viewport (in my case the browser
window)?


body{margin:0; padding:0}
html,body,div{ height:100%}

thank you spartanicus,

finally an answer ; )

I applied the CSS above to a test-html document, and it stretches to
full height of the viewport. Unluckily I am now confronted with two
issues:
1) There is an unwanted large amount of space between the signature
after the first article and the header of the second.
2) the margins to the left and right of the textbox (made them with a
background picture) - and at least in mozilla - its background color
don't stretch to the bottom of the viewport.

Is absolute positioning causing this behaviour?

I provided example html
(http://tomasio.laudatio.com/jobs/Cla...st_height.html) and css
(http://tomasio.laudatio.com/jobs/Cla...est_height.css) and a link
to the inital site (with the correct spacing between articles,
signatures and headers), which can be found here:
http://tomasio.laudatio.com/jobs/Cla..._template.html.

this is my final request for now, because i can finally go on with
building the site i am commissioned after solving the problems above
mentioned.
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"
Jul 20 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

20
2862
by: Firas D. | last post by:
http://firasd.org/ The divs of the 'box' class seem to have the effect I want in IE (namely: consistent height and horizontal alignment along the set of divs), but it totally falls apart in Firebird, like the p's inside teh divs are independent of the div's properties... (looked okay until I applied "display: inline;") What would be the proper way (I'm assuming that Firebird is displaying the proper behaviour)?
5
2909
by: Secret Guy | last post by:
Because of my experience posting various places over the last couple of weeks: I'm expecting to be greated with hostility for asking about concepts instead of "practical" things, since that has been my experience for years and decades. Maybe I'm projecting hostility. I don't know. How can I ask about theory and concepts without offending people? I'll just continue asking and cross my fingers: According to the 2.1 spec, regarding...
20
3042
by: Tyler Carver | last post by:
I would like to do something that seems so basic with two div's but I don't think it can be done. Tables can do it in a snap. I was convinced that css was the way to go for layout but without being able to do even the easiest things, I don't see how. Here is the table way to do the layout (I want this to work in compliance mode in all modern browsers.): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"...
2
5485
by: David Winter | last post by:
This is a totally trivial CSS problem, I'm sure, but I don't get it. I want a centered DIV with a fixed width between two other DIVs that should fill the rest of the window/viewport (= 100%). How do I achieve this? I tried width:auto for the buffer DIVs, but it didn't work. This should at least work in IE 5.5 and Opera. A totally standards-compliant solution would be appreciated, of course ... :/ This is waht I have:
12
6300
by: deko | last post by:
Is there any way to work around the blank space created by hidden divs? I'm trying to use a relatively postioned divs with show/hide behaviors to annotate an image. The divs show/hide onMouseOver/onMouseOut but leave a blank space on the page when hidden (the space where the divs would normally be). Is it possible to use z-indexing to put regular content where the hidden divs would be? When I try to do this, the layers don't unhide as...
15
13500
by: red | last post by:
How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side with float. But I can't center two side by side divs. If I float them and give them auto margins, the auto margins are ignored. If I wrap the two floated divs in another div, the two divs have no
11
5405
by: yawnmoth | last post by:
How do you get both of these div's to have a 100% width? (1): <div style="float: left; background: black; color: white">Hello, world! </div> <div style="clear: both; background: blue; color: white">Hello, world! </div> You could set the width inside the floated div to 100% but if you do that and if you have a floated fixed width div, the 100% width div will appear on a new line, as demonstrated (2):
12
4673
by: daniel2335 | last post by:
This problem is everywhere! I have read all forums available, spent about 40+ hours on it and lost a bit of hair. I was going to explain what its ment to look like but I just realised removing the DocType makes it look like how I want it (with the div containing the ">" symbol the full length). But obviously I want this look with the DocType still on. HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...
2
2742
by: rigiditymodulus | last post by:
Hi - So, I had this working perfectly, then had a small crash (the transmitter for my wireless mouse occassionally freaks out my MacBook Pro) and when I rebooted and opened up my file the two layered DIVs I had were no longer showing up correctly. I had this going fine for several hours -- it wasn't a happy accident I forgot to save. I'm totally mystified on this one. Here's the summary: I want #container to be under #containerbranch, so...
0
8697
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9184
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9045
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8892
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6538
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5878
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4634
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2359
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2013
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.