473,701 Members | 2,638 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Fill height to accommodate to viewport height

May be a FAQ but I haven't found a suitable solution yet. The
general (presentational ) structure of a document I'm describing is:

Header
-------
Content
-------
Footer

I want to make the "Content" part to fill the available height of
the viewport if its content has smaller height. I've been trying
some variants and the last one looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=US-ASCII">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Fill height</title>
<style media="screen" type="text/css">
html { height: 100% }
body { margin: 0; padding: 0; min-height: 100%;
/*position: relative; border: 1px dashed*/ }
</style>
</head>
<body>

<div style="position : absolute">Heade r</div>

<div style="margin: 3em 0">Content<b r>
<br><br><br><br ><br><br>...</div>

<div style="position : absolute; bottom: 0">Footer</div>

</body>
</html>

I don't know why but Opera and Mozilla/Netscape behave really
strange. Adding 'position: relative' to the body declaration seems
to fix it in Opera (to some extent)... but this should be in anyway.
Adding a border to the body "fixes" it in Mozilla/Netscape too but
there appears a scroll bar, because of that additional border.

Has someone achieved something similar? I would appreciate any comments.

--
Stanimir

Jul 20 '05 #1
6 8312
In article Stanimir Stamenkov wrote:
May be a FAQ but I haven't found a suitable solution yet. The
general (presentational ) structure of a document I'm describing is:
It is FAQ, but not that F.
I want to make the "Content" part to fill the available height of
the viewport if its content has smaller height. I've been trying
some variants and the last one looks like this:
[snip code, url would be nicer.]
I don't know why but Opera and Mozilla/Netscape behave really
strange. Adding 'position: relative' to the body declaration seems
to fix it in Opera (to some extent)... but this should be in anyway.
Adding a border to the body "fixes" it in Mozilla/Netscape too but
there appears a scroll bar, because of that additional border.
They still have body padding/margin? That adding border seems to indicate
border collapsing you didn't assume on Moz.
Has someone achieved something similar? I would appreciate any comments.


Yes, I think I have posted solution here few times.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #2
Lauri Raittila wrote:
It is FAQ, but not that F.

In article Stanimir Stamenkov wrote:
I want to make the "Content" part to fill the available height of
the viewport if its content has smaller height. I've been trying
some variants and the last one looks like this:

[snip code, url would be nicer.]


OT: I know it would be nicer, unfortunately the only place I have
where to, I could, put it is Yahoo Geocities. Therefore there would
be added additional markup (when you preview the URL) which would
invalidate my example as a HTML document. This may force you and
others willing to take a look to make a local copy and strip the
Yahoo server added garbage. I've put a complete source in-line
(which is pretty compact) for the example and is very easy just to
copy&paste in a local file and I think this was the better solution.
For further reference I put it here with the note there should be
stripped the server added part of the source:

http://www.geocities.com/stanio/temp/fill-height.html
I don't know why but Opera and Mozilla/Netscape behave really
strange. Adding 'position: relative' to the body declaration seems
to fix it in Opera (to some extent)... but this should be in anyway.
Adding a border to the body "fixes" it in Mozilla/Netscape too but
there appears a scroll bar, because of that additional border.


They still have body padding/margin? That adding border seems to indicate
border collapsing you didn't assume on Moz.


Which they "still have body padding/margin"? What border collapsing?
AFAIK there's border collapsing only in the table model. Please,
expand on this further.

One omission I've found later, which may interfere, is that I
specify 'height: 100%' (this is because Mozilla didn't handle
'min-height: 100%' correctly) on the root <html> element but I don't
specify 'overflow: auto' - there's presumed (in the spec)
overflow/scrolling mechanism is shown for the viewport and not for
the root element.
Has someone achieved something similar? I would appreciate any comments.


Yes, I think I have posted solution here few times.


A pointer would be nicer. Thank you, I'll search to see if I'll find it.

--
Stanimir

Jul 20 '05 #3
>
A pointer would be nicer. Thank you, I'll search to see if I'll find it.

http://scott.sauyet.name/CSS/Demo/FooterDemo1.html

HTH
David
Jul 20 '05 #4
In article Stanimir Stamenkov wrote:
Lauri Raittila wrote:
In article Stanimir Stamenkov wrote:
I want to make the "Content" part to fill the available height of
the viewport if its content has smaller height. I've been trying
some variants and the last one looks like this:

[snip code, url would be nicer.]


OT: I k...


Too bad.
I don't know why but Opera and Mozilla/Netscape behave really
strange. Adding 'position: relative' to the body declaration seems
to fix it in Opera (to some extent)... but this should be in anyway.
Adding a border to the body "fixes" it in Mozilla/Netscape too but
there appears a scroll bar, because of that additional border.


They still have body padding/margin? That adding border seems to indicate
border collapsing you didn't assume on Moz.
Sorry, meaned margin collapsing.
Which they "still have body padding/margin"?
Since you didn't take it away. body {margin:0;paddi ng:0}
One omission I've found later, which may interfere, is that I
specify 'height: 100%' (this is because Mozilla didn't handle
'min-height: 100%' correctly) on the root <html> element but I don't
specify 'overflow: auto' - there's presumed (in the spec)
overflow/scrolling mechanism is shown for the viewport and not for
the root element.


You forgot that *body* has default margin. Collapsing margins means that
those margins are effectively used for html element also. Or not.
Depending on browser, and about everything else.

This goes all the way back to the definition of initial containing block.
Unfortunately there is no definition, so it is pretty hard to explain it.
Anyway, it seems that browsers use different icb in different situations.
Has someone achieved something similar? I would appreciate any comments.


Yes, I think I have posted solution here few times.


A pointer would be nicer.


Unfortunately I have just posted it, not had example url (I had same
problem as you sometime...) And couldn't find one with little googling.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #5
Lauri Raittila wrote:
In article Stanimir Stamenkov wrote:
Which they "still have body padding/margin"?


Since you didn't take it away. body {margin:0;paddi ng:0}


Seems you don't pay attention. See my original post again - I've the
exact style rule you mention, specified.

The example David have pointed showed me I'm on the right way. I
just need more experimenting to gain an acceptable result in couple
of UAs.

--
Stanimir

Jul 20 '05 #6
In article Stanimir Stamenkov wrote:
Lauri Raittila wrote:
In article Stanimir Stamenkov wrote:
Which they "still have body padding/margin"?
Since you didn't take it away. body {margin:0;paddi ng:0}


Seems you don't pay attention. See my original post again - I've the
exact style rule you mention, specified.


Sorry. I see that your margin in HTML/BODY element collapses from div,
not body. I seem to have been unclear, as I didn't understand myself
correctly...

What I should have suggested would have been replacing margin by padding
in that div. That even seems to work. (I finally bothered copypasting
your example.)
The example David have pointed showed me I'm on the right way. I
just need more experimenting to gain an acceptable result in couple
of UAs.


Good.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #7

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

Similar topics

157
16385
by: Dennis | last post by:
Is there some way --using, say, DOM or javascript-- to detect the current pixel width and/or height of a relatively sized table or of one of its columns or rows. I'm going to be writing javascript to adjust my page to the viewer's browser window dimensions and this would sure be great information to have. Thanks .... Dennis
15
3765
by: Garmt de Vries | last post by:
I would have guessed that this issue had been discussed to death, but I couldn't find an answer to my problem in the ciwas archives. So, at the risk of asking something trivial, here goes: I want to have a page that looks as follows: at the left, a blue column with a navigation menu. The rest of the page, with a white background, is for the content. The blue fades smoothly into the white. I managed to do this by using a background...
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...
12
10165
by: Kepler | last post by:
How do you get the height of the client browser in IE? Both document.body.clientHeight and document.body.offsetHeight return the height of the document. If the page is long and there's a vertical scrollbar, you get the height of the entire document, screwing up any chance of centering a window in the browser using these values. Is there a way to get the height of the actual browser window and not the entire page height? Thanks.
4
12535
by: reycri | last post by:
I have a page that works as I intend in IE but not in Firefox: <html> <head> <title>Overflow Test</title> </head> <body style='overflow:hidden; margin:0; padding:0;'> <table border='0' cellpadding='0' cellspacing='0' style='border-collapse:collapse; width:100%; height:100%;'> <tr><td colspan='2' style='height:3em; border-bottom:1px solid
3
7326
by: Q. John Chen | last post by:
I have a page contains a table (e.g a 3-row table). The middle row is for the content and the bottom row is for footer notes. When the middle row does not have much info, the footer goes way too high up. How can I automatically adjust the height of the middle row when a user re-size the browser window. Or, how can specify a minimum height so at least the footer is a footer?
7
8704
by: Phlip | last post by:
HTMLers: Start with this simple HTML: <table border='1' width='100%' height='90%'> <tr><td> <div style='overflow: auto'> </div> </td></tr> </table>
14
3217
by: ShutterMan | last post by:
Im needing to resize a DIV tag to the entire height of the page. To me, this doesnt seem like it should be very difficult, but alas, its beating me. The content within the div may be tables, images, etc dyanmic. height: 100% doesnt work. Is there javascript code I can add that will make the container DIV the height of the page? (not viewport)
6
8181
by: msoliver | last post by:
I'm trying to figure out why the following creates a vertical scroll bar. Browser is IE 7 - using XHTML 1.0. I expand html and body to height of 100% and then I want to put a border around the whole viewport. What happens is that I get a vertical scrollbar (which I can hide, of course). Essentially what I'd like to know why adding a border increases the block but not the 100% sized viewport (and thus the scrollbar).
0
8736
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
8649
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9229
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
9083
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...
1
8977
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
4410
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3102
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2398
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2035
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.