Question

I m having a problem with a webpage.

I m using the min-height property to place the footer at the bottom of the page (if content is not long enough) and after the content (if content is longer than the window). There are plenty of tutorials that describe this method and I too did it this way.

html, body { height: 100%; }
.container { 
    min-height: 100%; 
    position: relative;
}
.footer {
    position: absolute;
    bottom: 0;
}

and some other code. It works fine then.

The problem occurs when I create two additional divs to add drop shadows to the container div. I have:

<div class="left-shadow">
    <div class="right-shadow">
        <div class="container">
        ...
        </div>
    </div>
<div>

I figured html and body height remain 100%, left-shadow div have min-height of 100%, and right-shadow and container have height of 100% (I m assuming that the 100% will mean 100% of the height of the parent element).

However, it does not work (in Firefox, it works in Chrome, I don t really care about IE), and I ve tried all sorts of combinations to get it right, but to no avail. Any help would be appreciated.

EDIT: (partial code)

<html>
    <head>
    ...
    </head>
    <body>
        <div class="left-shadow">
            <div class="right-shadow">
                <div class="container">

                    <div class="header">
                        header content
                    </div>

                    <div class="content" >
                       content goes here
                    </div>


                    <div class="footer">
                        footer content here
                    </div>


                </div> <!-- end container div -->
            </div>
        </div>
    </body>
</html>

And the relevant css:

html {
    overflow-y: scroll;
    height: 100%;
}

body {
    margin: 0 0 0 0;
    height:100%;
}

.left-shadow
{
    width: 1084px;
    background: url("images/left-shadow.png") repeat-y left; 
    /* both bg images are 30px wide.  1024 + 30 + 30 = 1084px */
    margin: auto;
    min-height: 100%;
}

.right-shadow
{
    width: inherit;
    background: url("images/right-shadow.png") repeat-y right;
    margin: auto;
    height: 100%;
}


.container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    width: 1024px;
    height: 100%;
}

EDIT 2: So I just found out that this question belongs at doctype. So from now on, I ll ask questions in the right place. But since this is already up, I d ask that people respond anyway without getting into where questions should be posted. Thanks.

Answer 1

First of all, to create a shadow effect use CSS. If CSS solution isn t what you re looking for then maybe try to set a shadow as a background image of .container. Right now your mark-up is overloaded by unnecessary elements.

But if that extra mark-up is the only way to do what you want to do, then try something like this:

* {
    margin: 0;
    padding: 0;
}

html, body, .shadow, #container {
    min-height: 100%;
}

#container {
    position: relative;
}

#content {
    padding-bottom: 55px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;

    background: #0a0;
}

And HTML mark-up (these shadow divs make it look terrible):

<body>
    <div id="shadow-left" class="shadow">
        <div id="shadow-right" class="shadow">
            <div id="container">
                <div id="content">
                    Page contents
                </div>
                <div id="footer">
                    Footer
                </div>
            </div>
        </div>
    </div>
</body>

Answer 2

I really recommend using this simple solution for a "sticky footer" instead. Just gets rid of problems: http://ryanfait.com/sticky-footer/

All that it requires is for you to be able to define a fixed height for your footer, which should be no problem in virtually all cases.

Works in all common browsers!

友情链接