Question

我想将我的页脚修复到底部间隙。如果内容较少，脚注即将出现且内容完整问题已解决且页脚应固定在底部，同时我将放大或缩小。但是当我缩放页脚时会转到内容部分

    <head runat="server">
        <asp:contentplaceholder id="HeaderContent" runat="server"></asp:contentplaceholder>
    </head> 

    <body class="hidden-sn white-skin backcolor">
    <form id="form1" runat="server">
    <main>
    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"></asp:contentplaceholder>
    </main>
    <!--main layout-->
    <!--footer-->
    <footer id="footer" style="position:relative;bottom: 0;left: 0;width: 100%; height: 50px;text-align: center; color: rgba(255, 255, 255, 0.6); line-height: 50px; overflow: hidden; font-size: 0.9rem; background-color: rgba(62, 69, 81, 0.3)">
        <div class="footer-copyright">
            <div class="container-fluid">
                © copyright 2016 transgraph consulting pvt.ltd, all rights reserved.
            </div>
        </div>
    </footer>
    </body>
    </html>

这是我的母版页。

    position: relative ---> if content is less coming up.
    position: absolute and fixed ----> if content is more getting on content. 


var docHeight = $(window).height();
          var footerHeight = $('#footer').height();
           var footerTop = $('#footer').position().top + footerHeight;
          if (footerTop < docHeight) {
               $('#footer').css('margin-top', 0 + (docHeight - footerTop) + 'px');
            }

我使用jQuery来修复它。将我的页脚固定在底部。建议我使用CSS或jQuery解决这个问题。我想在底部间隙修复我的页脚。如果内容较少，脚注即将出现且内容完整问题已解决且页脚应固定在底部，同时我将放大或缩小。但是当我缩放页脚时会转到内容部分

Answer 1

没有Jquery的CSS粘滞页脚

CSS：

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

HTML：

<div class="demo">
  <h1>CSS “Always on the bottom” Footer</h1>

  <p>Text</p>

  <p>text</p>

  <p>text</p>

  <p>text</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

Answer 2

为什么不使用bootstrap？这更容易。链接：w3school examples， youtube tutorial

Answer 3

在这里检查一下这段代码它会帮助你在底部固定页脚，并在你缩小或放大时修复

<div class="content">
<h1>Some Thing You Want to do</h1>
</div>
<footer class="footer">Footer</footer>

html, body {
height: 100%;
margin: 0;
}
.content {
padding: 20px;
min-height: 100%;
margin: 0 auto -50px;
}
.footer,
.push {
 height: 50px;
}

* {
box-sizing: border-box;
}
body {
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 20px 0 0 0;
}
footer {
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}

您可以在这里找到演示链接https://jsfiddle.net/kingtaherkings/08tb0fsm/1/

使用jQuery在底部修复页脚

3 个答案: