English 中文(简体)
传真,CSS - 标准脚步显示屏幕消化的内容
原标题:HTML, CSS - Sticky footer displays over content on screen resize

请参见我的网址[移走]。

我的脚步按预期在观察港尾展出。

如果对屏幕进行垂直调整,则脚步将重叠。

How can this be avoided?

最佳回答
问题回答

Don t worry, Sean. 你不要忘记工作。

您需要修改<条码> pa-底至<条码> mar-底,并在<条码>上绝对定位。 此外,还必须增加推动力,使这一 stick脚步得以工作。

这一jsFiddle应当帮助我:。 http://jsfiddle.net/4vunq/

传真:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Vault-X</title>
<!--JS enabling IE <=8 to recognise HTML5 elements-->
    <script type="text/javascript">
    document.createElement ( header )
    document.createElement ( footer )
    </script>
    <script type="text/javascript" src="javascript.js"></script>
    <link href="style_01.css" title="one" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="switchoff">
        <div id="wrapper">
            <header></header>
            <div id="switch">
                <a href="#" onClick="lightSwitch();">
                    <img src="http://www.vault-x.com/images/switch.jpg">
                </a>
            </div>
            <div id="content"><p class="switch">Hello World</p></div>
            <div class= push ></div>
        </div>
        <footer></footer>
    </div>
</body>
</html>

​ Relevant CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
footer, .push {
    height: 83px; /* .push must be the same height as "footer" */
}

这里,你有<条码> pa-底,而不是<条码>。

body {
    background:url( http://www.vault-x.com/images/body_bg.jpg ) repeat-x;
    background-color: #000;
    margin-bottom:83px;
}

下限也非常重要:

#wrapper {
    min-height: 100%;
    min-width: 450px;
    height: auto !important;
    height: 100%;
    margin: 0 auto -83px; /* bottom margin is negative value of footer s height */
}

以及你的脚本:

footer {
background: url( http://www.vault-x.com/images/foot_bg.jpg ) center no-repeat,
url( http://www.vault-x.com/images/foot_liq_bg.jpg ) repeat;;
        width:100%;
        height:83px;
        min-width: 450px;
}

这只应当做到。 尼斯光点;和好uck!

我补充说清楚:两者都解决了我的问题。

#footer {
        position:relative;
        width:100%;
        height: 200px;
        background-color:#7B7168;
        margin-top: -200px;
        padding-bottom:50px;
        clear:both;
        }




相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签