发表新帖
发表新帖

Making a footer not rise above the bottom of the screen without extraneous markup

后端 未结
关注
10 969
陌清茗
陌清茗 2021-02-01 09:06

If you only had to worry about Firefox and Webkit browsers, what CSS would you use to make the footer in the following HTML not rise above the bottom or the screen (and go lower

相关标签:
10条回答
  • 无人及你
    2021-02-01 09:33

    Given the requirements of no extra markup and not caring about IE (does work in IE8), I present this solution (which does require the use of a fixed height header). I did have to use float rather than display: inline-block as my Safari 4.0 did not display it with min-height for this solution:

       <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            }
        body {
            height: 100%;
            /*below for illustration only*/
            background: yellow;
            }

        #Header {
            position: relative;
            z-index: 1;
            height: 60px;
            margin-bottom: -60px;
            /*below for illustration only*/
            background: red;
            opacity: .8;
            }

        #Article {
            float: left;
            min-height: 100%;
            width: 69.9%;
            vertical-align: top;
            margin-bottom: -30px;               
            /*below for illustration only*/
            background: blue;
        }

        #Aside {
            float: left;
            min-height: 100%;
            width: 30%;
            vertical-align: top;
            margin-bottom: -30px;               
            /*below for illustration only*/
            background: green;
        }

        #Article:before,
        #Aside:before {
            content: ' ';
            display: block;
            height: 60px;
            width: 100%;
        }

        #Article:after,
        #Aside:after {
            content: ' ';
            display: block;
            height: 30px;
            width: 100%;
        }

        #Footer {
            position: relative;
            z-index: 1;
            height: 30px;
            margin-top: -30px;
            clear: left;
            /*below for illustration only*/
            background: pink;
            opacity: .8;
        }
    </style>

    HTML is just:

    <body>
    <div id="Header">Header</div>
    <div id="Article">Article</div>
    <div id="Aside">Aside</div>
    <div id="Footer">Footer</div>
</body>
    0 讨论(0)
  • 孤街浪徒
    2021-02-01 09:36

    Okay, here is the alternative css that I was talking about. It works in Firefox, Safari, and Chrome. IE7/IE6 don't work, you'd probably have to a little tweaking to get that working. Opera has a small bug with the body margins. Other than that, it uses just basic CSS (unlike the display:table that isn't very compatible).

    <html>
<head>
    <title>Test page</title>
    <style>
        body{
            margin:0px;
            background-color:green;
            margin-top:75px;
            margin-bottom:25px;
        }
        #page_container{
            max-width:700px;
            margin-left:auto;
            margin-right:auto;
            position:relative;
            height:100%;
            padding-top:75px;
            margin-top:-75px;
        }
        #header{
            background-color:red;
            text-align:center;
            font-size:25px;
            font-weight:600;
            height:75px;
            z-index:2;
            position:absolute;
            top:0px;
            width:100%;
        }
        #contents{
            background-color:yellow;
            width:100%;
            min-height:100%;
        }
        #footer{
            background-color:blue;
            height:25px;
        }    
    </style>
</head>
<body>
    <div id='page_container'>
        <div id='header'>Title of your page</div>
        <div id='contents'>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
        </div>
        <div id='footer'>This is a footer</div>
    </div>
</body>
</html>

    Wow, if you just tweaked it a little and made it IE6-7 compatible, you'd be famous. I think this is the first solution I've seen.

    0 讨论(0)
  • 囚心锁ツ
    2021-02-01 09:37

    Since you mentioned that your solution worked except for IE, all you need to do is use JS to enable the styling of HTML 5 elements:

    http://medero.org/finally.html

    That would make the styles apply, but it still looks like, at least in IE6 it needs some extra help.

    Is this close to what you need for IE?

    0 讨论(0)
  • 梦谈多话
    2021-02-01 09:39

    First of all, no matter what you do, you'll need a wrapper div for the entire page. I usually call it #page_container or something. If you think about it, having a div container for the whole page doesn't defeat the essence of css style sheets. On the other hand, if you had a bunch of wrappers scattered around the html page, it could potentially get pretty messy with all that extra markup. So, I always use a page_container on my layouts, even if I don't put any css styling on it, I always have one. Basically, it will just act like a body tag, only allow you to style it.

    With that said, there are a couple solutions if your layout was refined to:

    <html>
...
<body>
<div id='page_container'>
    <div id='header'></div>
    <div id='contents'></div>
    <div id='footer'></div>
</div>
</body>
</html>

    Only Firefox you say? Did I hear that right? I don't think I've ever heard anyone say that before. In that case, its fairly easy. The easiest solution would be:

    <html>
<head>
    <title>Test page</title>
        <style>
            body{
                background-color:green;
                margin:0px;
            }
            #page_container{
                width:700px;
                margin-left:auto;
                margin-right:auto;
                display:table;
                height:100%;
            }
            #header{
                background-color:red;
                text-align:center;
                font-size:25px;
                font-weight:600;
                height:75px;
                display:table-row;
            }
            #contents{
                background-color:yellow;
                display:table-row;
            }
            #footer{
                background-color:blue;
                height:25px;
                display:table-row;
            }   
    </style>
</head>
<body>
    <div id='page_container'>
        <div id='header'>Title of your page</div>
        <div id='contents'>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
        </div>
        <div id='footer'>This is a footer</div>
    </div>
</body>
</html>

    I've been experimenting with some other css styling, and I think I almost have a layout that could be cross-browser compatible. I'll post it if I'm not too late.

    0 讨论(0)
  • 走了就别回头了
    2021-02-01 09:40

    I think you're talking about the margin of 10-15 pixels below the footer. Try adding this code to your CSS;

    body { margin-bottom:0px; }

    The body has a default margin of 10-15 pixels so in order to remove it to flush your design to the top or bottom you have to tell the body to have a margin of zero.

    Hope that helps.

    0 讨论(0)
  • 耶瑟儿～
    2021-02-01 09:41

    CSS:

    * {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

    HTML:

    <html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="article"></div>
            <div class="aside"></div>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题