如何让页脚保持在网页的底部?

我有一个简单的2列布局，带有一个脚注，可以清除标记中的左右div。我的问题是，我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚，它就会起作用，但情况并不总是如此。

当前回答

我没有任何运气在这一页上建议的解决方案，但最后，这个小技巧成功了。我将把它作为另一种可能的解决方案。

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

2017-06-21 17:09:38

其他回答

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

如果你正在寻找一个在页面底部对齐的响应性页脚，它总是保持视口高度的80%的上距，那么这个方法应该是有用的。

2014-12-21 06:23:14

我自己有时也与此斗争，我总是发现所有这些div在彼此之间的解决方案是一个混乱的解决方案。我只是胡乱摆弄了一下，我个人发现这是有效的，而且这当然是最简单的方法之一:

html {
    position: relative;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

我喜欢这样做的原因是不需要应用额外的HTML。您可以简单地添加这个CSS，然后编写您的HTML

2017-07-10 21:16:05

保持<main>为min-height 90vh将永远解决您的问题。下面是基本结构，它将帮助您遵循语义并覆盖整个页面。

第一步:除了页眉和页脚，所有内容都放在主标签内。

<body>
    <header>
        <!╌ nav, logo ╌> 
    </header>
    <main>
        <!╌ section and div ╌> 
    </main>
    <footer>
        <!╌ nav, logo ╌>
    </footer>
</body>

步骤2:添加min-height: 90vh为主

main{
    min-height: 90vh;
}

通常，页眉和页脚的最低高度是70px，所以这种情况下工作良好，尝试和测试!

2022-08-11 18:51:25

对我来说，最好的显示它(页脚)的方式是粘在底部，但不覆盖所有的内容:

#my_footer {
    position: static
    fixed; bottom: 0
}

2017-11-25 18:34:59

jQuery跨浏览器自定义插件- $.footerBottom()

或者像我一样使用jQuery，并设置你的页脚高度为auto或fix，无论你喜欢什么，它都会工作。这个插件使用jQuery选择器，所以要使它工作，你必须包括jQuery库到你的文件。

下面是运行插件的方法。导入jQuery，复制这个自定义jQuery插件的代码，导入jQuery后再导入!这是非常简单和基本的，但很重要。

当你这样做的时候，你所要做的就是运行这段代码:

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

不需要将它放在document ready事件中。就这样，它会运行得很好。它会重新计算你的页脚的位置，当页面被加载，当窗口被调整大小。

下面是插件的代码，你不需要理解。只要知道如何实施就行了。它为你工作。但是，如果您想知道它是如何工作的，只需查看代码即可。我给你留言了。

//import jQuery library before this script

// Import jQuery library before this script // Our custom jQuery Plugin (function($) { $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom(); var defaults = { target: "footer", container: "html", innercontainer: "body", css: { footer: { position: "absolute", left: 0, bottom: 0, }, html: { position: "relative", minHeight: "100%" } } }; options = $.extend(defaults, options); // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE $(options.target).css({ "position": options.css.footer.position, "left": options.css.footer.left, "bottom": options.css.footer.bottom, }); $(options.container).css({ "position": options.css.html.position, "min-height": options.css.html.minHeight, }); function logic() { var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like. }; // DEFINE WHEN TO RUN FUNCTION $(window).on('load resize', function() { // Run on page loaded and on window resized logic(); }); // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE // return this.each(function() { // this.checked = true; // }); // return this; }; })(jQuery); // End of plugin // USE EXAMPLE $.footerBottom(); // Run our plugin with all default settings for HTML5 /* Set your footer CSS to what ever you like it will work anyway */ footer { box-sizing: border-box; height: auto; width: 100%; padding: 30px 0; background-color: black; color: white; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <body> <div class="content"> <header> <nav> <ul> <li>link</li> <li>link</li> <li>link</li> <li>link</li> <li>link</li> <li>link</li> </ul> </nav> </header> <section> <p></p> <p>Lorem ipsum...</p> </section> </div> <footer> <p>Copyright 2009 Your name</p> <p>Copyright 2009 Your name</p> <p>Copyright 2009 Your name</p> </footer>

2016-01-16 03:14:16

如何让页脚保持在网页的底部?

推荐文章

最新文章

标签