ansaurus

Question

Answer 1

+2 A:

(Deleted all the old stuff)

Here is the new HTML with gallery 100%, hope it works :-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>   
    <title>A CSS Sticky Footer</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
     <style type="text/css">
     * {
         margin: 0;
        }

        html, body {
            height: 100%;
        }

        .header{background-color: green;position: fixed; top:0;width: 830px;height: 80px; z-index:1;}

        .gallery {background-color:blue;height: 100%;}

        .wrapper {
            height: 100%;
            margin: 0 auto;
            width:830px;
        }

        .footer, .push {
            height: 80px;
            width: 830px;
            background-color: #CCFF00;
            position: fixed;
            bottom:0;
        }

     </style>
</head>
<body>
    <div class="wrapper">
        <div class="header">Header</div>
        <div class="content gallery">gallery</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

Allan Kimmer Jensen 2010-02-12 11:49:45

Ah sorry :P The real code does have html, body set to height 100%. The push div is also closed so there's no error in that atleast.

Kenny Bones 2010-02-12 12:22:25

@Kenny Bones you might also want to consider accepting his answer

c0mrade 2010-02-12 12:34:12

Why? The question isn't answered. I'm still having the problem

Kenny Bones 2010-02-12 13:29:33

Hi, I've already tried to set min-height, height: auto !important and height 100%. Doesn't do anything. Perhaps I'll try the tip at the bottom here, using a completely different solution.

Kenny Bones 2010-02-12 14:49:08

I would also recommend a different solution, but it depends on what you want to achieve.

Allan Kimmer Jensen 2010-02-12 15:23:12

Please do recommend! :) You see, all I want is for a layout where thewrapper is in the centre, header at the top,footer is at the bottom (expanding if needed, but staying at the bottom if the content is smaller than needed) and a DIV inside set to 100% height.

Kenny Bones 2010-02-12 16:36:14

It's working for you now? The gallery div is 100% in height?

Kenny Bones 2010-02-12 16:40:50

I mean, all I'm trying to achieve is a layout just like the one above, only the gallery div should be 100% in height. Because it's just that, a gallery. And it's supposed to display inner divs based on the height of the browser window, making it liquid.

Kenny Bones 2010-02-12 16:43:30

did you try adding the missing ; it fixed it for me...

Alex 2010-02-13 13:34:49

Yes, I did. And it did nothing. Would you mind posting the entire html and css? In case i'm missing something else?

Kenny Bones 2010-02-14 14:40:17

I understand nothing, I just tried the code you provided and nothing happens. It's just the same. The gallery DIV seems to be set to height:auto when it's really supposed to fill the entire free space. Are you sure you see a huge blue box (gallery div) when you try the code?Edit: It works in IE7. Partially atleast. The gallery div looks to be 100% in height, but the entire wrapper is not centered. In F3.6, it's centered but the gallery div is not 100% height. Must be missing something.

Kenny Bones 2010-02-16 08:50:53

Strange... maybe i forgot something... i will be back soon!

Allan Kimmer Jensen 2010-02-16 10:05:04

First one looks the same really. The second one is also about the same, only difference is the big blue square. And that's because the wrapper is inheriting the gallery class, which it shouldn't. In your second example, the div "content" should be the gallery. And THAT'S the DIV that should be 100% in height. Which it isn't. Not sure you understand what I'm trying to achieve. And I'm starting to think that what I'm trying to achieve isn't even possible actually. It's like nesting more than two DIVs and trying to achieve 100% height on all of them is impossible.

Kenny Bones 2010-02-16 14:10:16

Yep, I do not think that i understand anything :D ... I can not see why you would have a div with 100% heigth within a div thats also 100% heigth - In my mind you can achieve the same things with just one div. In this case blue background. Nesting two divs will just cover the first DIV 100%, and then you can't see the frist one any more. Would you mind taking a screenshot of what you see, and then draw what you want, then I will find a solution that will fit, what you are trying to achive.

Allan Kimmer Jensen 2010-02-16 15:23:24

Yup, I see how you might be confused :)Ok, so I reckon you're familiar with the iPhone interface?Basically you have a header, a middle portion and a footer. I want the exact same thing, only the middle portion is the gallery. The clue to why I want 100% height is because of resolutions on different PC setups. For example, the footer should always be on the bottom. And the header is on the top. And whatever available space in the middle is for the Gallery. And the gallery concists of several smallers boxes (pictures). So, the gallery div should act like a stack panel, if you understand :)

Kenny Bones 2010-02-17 08:44:33

So if there's enough space left for the gallery to fit - say 10 images, the rest of them is on a different "page" so to speak. And if the gallery can fit 20 images, the page number decrease - or increase based on whatever space is available. So, I guess I've been thinking a bit too difficult perhaps?

Kenny Bones 2010-02-17 08:46:35

The paging would have to be made with javascript, and i still think that my other solution chould work... but i have made a new one that that i THINK and hope will work for you... it sould be 100% like you want it. Stay tuned for an update.

Allan Kimmer Jensen 2010-02-17 10:13:01

Answer 2

+1 A:

I don't know if this is technically an answer, but it's more of an answer than a comment so here goes:

Personally I don't like the Ryan Fait Sticky Footer approach, I much prefer the one used here: http://www.digital-web.com/extras/positioning_101/css_positioning_example.php. To me it's a much cleaner solution and makes more sense from a design and standards point of view. From my experience it works almost 100%, and degrades gracefully the rest of the time.

My 2cents...

Alex 2010-02-12 14:04:00

Have you tried setting 100% height on the content div in this example? That's really what I need to do. I just tried quickly using FireBug and it didn't seem like the height was set to 100%, just auto.

Kenny Bones 2010-02-12 14:53:01

ansaurus

tags:

views:

answers:

CSS - Multiple 100% height divs?

Here is the new HTML with gallery 100%, hope it works :-)

related questions