Fatal编程技术网
  • html/
  • Html 希望页脚保持在底部，但不是绝对的

Html 希望页脚保持在底部，但不是绝对的

html asp.net css

Html 希望页脚保持在底部，但不是绝对的,html,asp.net,css,sticky-footer,Html,Asp.net,Css,Sticky Footer,我正在制作一个网站，并且在页脚上有一个包装，我希望页脚是粘性页脚，但是当我最小化屏幕并使其变小时，页脚会超过内容和页眉 #footerWrapper { height: 177px; bottom: 0; position: absolute; width: 100%; } 这就是我想要的，因为无论屏幕大小如何，页脚都会转到页面底部。然而，当我最小化屏幕并将其向上移动时，它保持绝对，因此保持在1页中 因为我希望它留在页面上，而不是页脚是绝对的 任何想法。试试这个 #foote

我正在制作一个网站，并且在页脚上有一个包装，我希望页脚是粘性页脚，但是当我最小化屏幕并使其变小时，页脚会超过内容和页眉

    #footerWrapper {
 height: 177px;
 bottom: 0;
 position: absolute;
 width: 100%;
 }
这就是我想要的，因为无论屏幕大小如何，页脚都会转到页面底部。然而，当我最小化屏幕并将其向上移动时，它保持绝对，因此保持在1页中

因为我希望它留在页面上，而不是页脚是绝对的

任何想法。

试试这个

#footerWrapper{
    position: fixed;
}

#contentWrapper{
    margin-bottom: 177px; // height of the footer
}
我在用这个，它在手机上也很好用

HTML:

资料来源：

演示：

通过使用z-index，我能够保持页脚的粘性，并且不会超过页眉。只要给较高的div加上较高的z指数

    #headWrapper {
        padding-bottom: 0px;
        position: relative;
    }
    #headWrapper {
        z-index: 2;
    height: 160px;
        /* width: 960px; */
        margin: 0 auto;
        background: url(/images/PageImages/homeHeadBack.png) repeat-x;
    }

    #footerWrapper {
        background: url(/images/PageImages/footerBack.png) repeat-x;
        height: 177px;
        position: absolute;
        width: 100%;
        bottom: 0;
        z-index: 1;
    }
请注意#头巾需要指定位置：相对。
我想你可以从这个开始。在Chrome上工作。

好吧，我不是很肯定，但我想我理解你想要实现的目标

#footerWrapper {
   background: url(/images/PageImages/footerBack.png) repeat-x;
   height: 177px;
   position: fixed;
   width: 100%;
   bottom: 0px;
}

#contentWrapper {
   background: url(/images/PageImages/contentTopBack.png) no-repeat center top;
   min-height: 208px;
   margin-bottom: 177px;
}
如果这不能解决问题，那我就不明白你的目标。

试试这个

HTML:

更多信息。

在页脚上使用
页边距顶部
，并给它一个百分比，例如我有
页边距顶部：20%
，效果很好。同时将
位置
更改为
相对位置
。是的，我知道你在做什么。但问题是并非每个浏览器的大小都相同，当我设置177px时，页脚不在底部。为了防止页脚覆盖在内容上，我在内容部分底部留了一个边距，即页脚的高度。这将显示最佳结果。但说到响应性，是的，这并不好。我认为在这种情况下，在媒体查询中，您必须将页边距底部从像素更改为百分比。同样的问题。因为底部被设置为：0px，这意味着如果你不想让它随着页面向上移动，它仍然会向上移动，为什么你不麻烦使用“固定”或“绝对”呢？让它成为页面流的一部分。页脚不能是绝对的 
    #headWrapper {
        padding-bottom: 0px;
        position: relative;
    }
    #headWrapper {
        z-index: 2;
    height: 160px;
        /* width: 960px; */
        margin: 0 auto;
        background: url(/images/PageImages/homeHeadBack.png) repeat-x;
    }

    #footerWrapper {
        background: url(/images/PageImages/footerBack.png) repeat-x;
        height: 177px;
        position: absolute;
        width: 100%;
        bottom: 0;
        z-index: 1;
    }

#footerWrapper {
   background: url(/images/PageImages/footerBack.png) repeat-x;
   height: 177px;
   position: fixed;
   width: 100%;
   bottom: 0px;
}

#contentWrapper {
   background: url(/images/PageImages/contentTopBack.png) no-repeat center top;
   min-height: 208px;
   margin-bottom: 177px;
}

<html>
<head>

    <link rel="stylesheet" href="layout.css" ... />

</head>

<body>

    <div class="wrapper">

        <p>Your website content here.</p>

        <div class="push"></div>

    </div>

    <div class="footer">

        <p>Copyright (c) 2014</p>

    </div>

</body>

</html>

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