18 replies [Last post]
guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 16 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Hi,
as a test, I want to create a simple page containing just a single div;
this div must have dimensions equal to browser viewport, and also a minimum width limit and a minimum height limit;

I've done this page in firefox, and it works fine;
this is CSS:

#main{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color:#0066FF; min-width: 800; min-height: 500; } and this is HTML:

Main Page

Now, I've a first question:
Is position_absolute the best choice?
Is there a better alternative?

Then the main problem;
I know this CSS code doesn't work in Explorer because explorer doesn't support min-height, min-width, right:0 and bottom: 0.
So, There are two problem must be solved;
As to min-height, normally I use:

height: expression(document.body.clientHeight < 500 ? "500px" : document.body.clientHeight+"px");

but, in this case I need the browser viewport size, not the document one.
I've also tried to use the syntax I use in javascript, that is
document.documentElement.offsetHeight
but it doesn't work.

How can I solve?

Thank you in advance.
gg.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 1 day ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Why exactly must it be the

Why exactly must it be the EXACT size of the viewport?

What are you trying to achieve?

Verschwindende wrote:
  • CSS doesn't make pies

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 16 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Hi, thank you for the

Hi,
thank you for the answer.
I want the same I obtain in firefox, that is:

in Explorer I obtain this:

This is code I've used:
CSS

#main{
position:absolute;
left:0;top:0;
right:0;bottom:0;
background-color: blue;
width: 200px;
border: 2px solid;
border-color: white;
min-height: 400px;
}

HTML

As you can notice, I've omitted the width properties because I don't know the value it must have.
As I said, I want my div height must adapt to the client display area, if min limit allows this.

I hope it's clear.

Thank you.
gg.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

In IE6 'height' is

In IE6 'height' is equivalent to 'min-height' so feed height hidden from real browsers.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 16 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Hugo wrote:In IE6 'height'

Hugo wrote:
In IE6 'height' is equivalent to 'min-height' so feed height hidden from real browsers.

Is this a solution?
I know explorer treats height also as min-height, but this knoledge doesn't solve the problem;

if I use, as example, height: 800, in explorer I always see a div with a fixed 800px height;
and I don't want this;
If I've a viewport of about 1024x768 I want div height to be 1024;
If I've a viewport of about 640x480 I want div height to be 800.

gg.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 1 day ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Faux Columns anyone?

Faux Columns anyone?

Verschwindende wrote:
  • CSS doesn't make pies

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 16 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

thepineapplehead wrote:Faux

thepineapplehead wrote:
Faux Columns anyone?

Excuse me, I don't understand this;
I'm Italian;
What does it mean?

Thank you.
gg.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I thought Faux was of Latin

I thought Faux was of Latin derivation?

It means 'False' or 'Fake'
Googling 'faux columns' would have found an answer to what it was.

As to my ramble about IE height, apologies I've clearly not grasped what you are wanting to do Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If you need something to

If you need something to adapt to clients viewport height why aren't you just doing html,body{height:100%;} and min-height 100% for the element in question

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 16 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Hugo wrote:If you need

Hugo wrote:
If you need something to adapt to clients viewport height why aren't you just doing html,body{height:100%;} and min-height 100% for the element in question

Because I want a min-height of 400 px;
I want my page is displayed in IE like the first screenshot I've posted, instead of the second one;
and I want a min height of 400px;
that is, if a client browser have a viewport height minus than 400px, suppose 300px, my div height remain to 400 px, and on the browser appear a vertical scrollbar.
Just this.

Is it possible in your opinion?

I begin to think IE is a serious problem in order to design a W3C compliant page.

Thank you.
gg.

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 16 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

No ideas?

No ideas?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 1 day ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Feed height: 400px; to IE

Feed height: 400px; to IE with a conditional comment and min-height: 400px; to real browsers.

Then use the "faux columns" technique to make the columns appear the same height.

Verschwindende wrote:
  • CSS doesn't make pies

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

hold on guestguest. Can you

hold on guestguest. Can you show us a pic of what you're trying to accomplish - the whole page? I feel, in reading this and your other threads, that you're approaching things in the wrong way. It seems here that you're getting hellbent on forcing a 100% height element when a simple background image may give you what you want (faux column or otherwise).

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 16 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

OK,

OK,
I've seen faux columns tecnique, but it's not good for what I want;
I've seen many examples, like this (http://www.code-sucks.com/css%20layouts/faux-css-layouts/2-column-css-layouts/faux-1-2-col/), but as you can see, height doesn't depends on client viewport height, but on the quantity of text the div contains;
The property It's just for me is "height: 100%";
so solution given by Hugo a few post before is good for this problem;
but I've also another problem in the same page I must solve;
that is the min-height problem;
this last can be solved with "height: 400px";
but how to solve either the two problems?
I can't use at same time height: 400px and height: 100%.

I hope I'm wrong, but I think there isn't a full solution;
I'll use height: 100% as Hugo said, and I'll limit height of the column through the text I insert in it.

Any update will be appreciated.

Thank you again.
gg.

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 16 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

wolfcry wrote:hold on

wolfcry wrote:
hold on guestguest. Can you show us a pic of what you're trying to accomplish - the whole page? I feel, in reading this and your other threads, that you're approaching things in the wrong way. It seems here that you're getting hellbent on forcing a 100% height element when a simple background image may give you what you want (faux column or otherwise).

Yes, I've my own background image - as you can see in my other threads -, but this image alone doens't do much.
As I said, if I use height: 100% and obviously repeat-y background properties, and also htlm, body{height: 100%} (as Hugo said) I solve my first problem;
but the min-height: 400px problem remains.

Please let me know if my english is good and correct;
it can be my exposition isn't clear enough.

Thank you again.
gg.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 48 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Hugo wrote:I thought Faux

Hugo wrote:
I thought Faux was of Latin derivation?

Most of the links that will come up if you enter "define:faux" in Google seem to think it is the French word for "fake", although to me that seems a bit dubious. I think it's more likely that it's what some French-ignorant pundit thought "fake" would be in French. Wikipedia disagrees with me though...

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The web is not print

This won't help you do what you want, but it is a basic principle of good web design:

The web page is not a printed page. Don't design as if it were.

It appears you're trying to fit a print design to a web page.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 16 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

I've simply created a page

I've simply created a page W3C compliant working in firefox and I wanted to know if it is possible to make it working on IE too.

After many posts I've understood that this is not possible,
so I'm content with Hugo solution.

Anyhow I've learned some useful and interesting properties and tecniques,
So thank you again.
gg.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Yeah, the faux columns

Yeah, the faux columns work-around was developed because of IE's shortcomings. That's just a fact of life.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.