PDA

View Full Version : Div Height As Big As Screen And No Bigger



huzzak
Apr 6th, 2010, 07:17 PM
Hi everybody!

I want my page's content to be displayed at the maximum size for the screen without any need for scrolling. There is a header, and a body. Inside of the body are two lists, side by side. Clicking in the first list changes the contents of the second list. Both lists contain many more elements than could fit on a single screen, so they should have individual scroll bars to keep them from making the entire page have to scroll.

I tried placing a div around everything and setting the height to 100% and, subsequently to fixed sizes, but it always gets resized by the child elements. How can I make the containing div only as big as the screen and no bigger and how can I make the children respect the constraints of the parent?

Thanks!

Huzzak

deXypher
Apr 7th, 2010, 06:35 AM
Hey huzzak,

I've actually been looking into this for a while after I read your post, and unfortunately I don't think you're able to do this with just HTML & CSS. You'd probably have to search up on some Javascript coding to determine the screen size of the current user.

If you actually have a set screen size you want this to work on, then below is the CSS code I created to create your two lists into Div layers, and setting their height to a fix height, which in this example the screen height is 800px (note that I'm not that great with coding, so there could be better methods of doing it):


html{
overflow: scroll;
}

div#list1{
position: absolute;
height: 800px;
width: 50%;
left: 0;
top: 0;
overflow: scroll;
}

div#list2{
position: absolute;
height: 800px;
width: 50%;
right: 0;
top: 0;
overflow: scroll;
}

zen-angel
Apr 7th, 2010, 02:47 PM
when setting height:100% to a "foo" element, it is relative to the FATHER's height - that means, if the father element has a fixed height of 100px, your "foo" element will also be 100px high.

this is the case when using % height makes sense.

You could determine the browser viewport using javascript, however do you really need to do that?

fixing the height in general is not recommended for accessibility issues, plus if you use javascript the way I mentioned above, you will also need to handle a lot of events e.g. browser resize after your page loaded.

also think that computer screens aren't the only devices used to browse (however still the most popular) so such a layout could impair the usability of your site when accessed via smartphones / tablets / other formats

HTH
LUCA
http://www.zen-angel.com