堆栈内存溢出
  简体   繁体   English

CSS页脚不粘且浮动到底部

[英]CSS Footer not sticky and floating to the bottom

 原文  2020-03-08 19:15:19  3   4    html/ css

问题描述

The footer on my website should be at the end of the page and not sticky.我网站上的页脚应该在页面的末尾而不是粘性的。 If there is more content that would fit on the screen you have to scroll down to see the footer.如果有更多适合屏幕的内容，您必须向下滚动才能看到页脚。 If there is less content than would fit on the page the footer should float to the bottom.如果页面上的内容不足，则页脚应浮动到底部。 At the moment only the first works.目前只有第一个作品。 Does anybody now how to fix it?现在有人如何修复它？

My HTML:我的 HTML：

<body>
    <nav>...</nav>
    <div class="container">...</div>
    <footer>
        <div class="container">
            <span>Footer Text</span>
        </div>
    </footer>
</body>

My CSS:我的CSS：

footer {
    background-color: #333333;
    color: white;
}

带有页脚的网站应如下所示

4 个解决方案

解决方案1
 4 已采纳  2020-03-08 19:20:05

Use flexbox and auto margin ref .使用 flexbox 和 auto margin ref 。 

 body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; } footer { margin-top: auto; background-color: #333333; color: white; }
 <body> <nav>...</nav> <div class="container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <footer> <div class="container"> <span>Footer Text</span> </div> </footer> </body>

When long text:长文本时： 

 body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; } footer { margin-top: auto; background-color: #333333; color: white; }
 <body> <nav>...</nav> <div class="container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <footer> <div class="container"> <span>Footer Text</span> </div> </footer> </body>

解决方案2
 0  2020-03-08 19:18:59

Try the following:请尝试以下操作：

<style>
    footer {
        position: absolute;
        top: (numberofuntits)px;
        left: (numberofUnits)px;
    }    
</style>

解决方案3
 0  2020-03-08 20:00:01

See a solution with Bootstrap 4 below:请参阅下面的 Bootstrap 4 解决方案： 

 html, body { height: 100%; } .site-wrapper { min-height: 100%; } footer span { color: #fff; }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <div class="site-wrapper d-flex flex-column"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <div class="container"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus felis id mauris molestie laoreet. Integer sed purus tempor, mollis nisi sit amet, varius nunc. In malesuada mattis placerat. Fusce vel dui at felis semper cursus. Nulla scelerisque, eros id pellentesque molestie, sem urna fringilla urna, porttitor vehicula nisl augue sit amet dui. Etiam interdum congue venenatis. Ut ac ornare massa. Morbi sed dui posuere, tincidunt est a, eleifend nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed tincidunt laoreet odio, et consequat neque lobortis vel. Duis tortor ex, efficitur at efficitur ut, feugiat eleifend ligula. Nullam ultrices vitae tellus a elementum. Nam luctus, ligula ut varius hendrerit, metus quam congue dui, tempor maximus tortor nulla ac metus. Vestibulum dignissim nisl nec suscipit dictum. Phasellus vehicula eu purus ac dictum. Pellentesque sollicitudin scelerisque ipsum, sit amet tempus turpis condimentum posuere. </p> <p> Nullam est dui, laoreet quis tincidunt quis, iaculis ut purus. Maecenas semper nunc eget tincidunt pellentesque. Phasellus lobortis tellus enim, vitae accumsan ligula tincidunt sit amet. Proin bibendum, leo vel laoreet vestibulum, ante erat pharetra ligula, mattis rutrum ligula felis non tortor. In hac habitasse platea dictumst. Vestibulum condimentum elit nec libero tempor ultrices. Vivamus velit elit, accumsan vel velit rutrum, laoreet fringilla lectus. Mauris vitae lectus mollis, viverra nulla non, sollicitudin eros. Nam tincidunt nulla et nulla convallis gravida. Fusce neque turpis, mollis sit amet nisl sit amet, interdum sollicitudin odio. Sed porta purus eget sem mollis, in lobortis lacus venenatis. Duis id tristique orci. Morbi dapibus a felis et imperdiet. Vestibulum fermentum euismod sem at mattis. Nulla efficitur, est eget sollicitudin malesuada, nulla turpis pellentesque felis, euismod semper libero nibh eu tellus. Integer lacus leo, ultricies quis porttitor luctus, pretium vel nibh. </p> <p> Suspendisse in lectus lacinia, mattis ligula nec, malesuada arcu. Sed sodales metus odio, eget imperdiet felis pellentesque vitae. Nulla tincidunt, diam et rutrum ultrices, justo felis dictum magna, in lacinia nisl sem eget nunc. Morbi fringilla mauris venenatis euismod vulputate. Nunc blandit urna et nunc venenatis ultricies. Pellentesque tempor quam eu sodales facilisis. In ornare porta pellentesque. Pellentesque cursus maximus posuere. </p> <p> Curabitur commodo tristique mi congue tincidunt. Pellentesque quis viverra nunc. Aliquam aliquam nec arcu ut scelerisque. Donec mattis lacus in aliquet iaculis. Aliquam eget nunc vitae ligula iaculis euismod at ut justo. Fusce feugiat commodo erat, consectetur auctor neque vulputate eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper nunc et blandit sagittis. Aenean nibh nunc, eleifend ac vulputate in, sodales quis erat. Vestibulum porta quam vitae mollis tristique. Proin dolor sem, tempor sit amet facilisis et, sagittis porttitor nisl. Phasellus venenatis cursus lorem, facilisis vestibulum libero cursus id. In sed finibus metus. Aenean convallis massa at turpis lacinia lobortis. Praesent scelerisque ligula vel magna pharetra, eu condimentum nisl egestas. </p> </div> <footer class="mt-auto bg-dark p-2"> <div class="container text-center"> <span>Footer Text</span> </div> </footer> </div>

Note that it supports variable height of the footer.请注意，它支持页脚的可变高度。

Let me know if it suits your needs.让我知道它是否适合您的需求。

解决方案4
 0  2020-03-08 20:21:14

 h1{ font-size: 100px; color: blue; font-family: 'Mrs Sheppards', cursive; }
 <link href="https://fonts.googleapis.com/css?family=Mrs+Sheppards&display=swap" rel="stylesheet"> <div class="container"> <h1>S U<a href="isitchristmas.com"> CK </a>I T</h1> </div>

heck yeah哎呀是的

sry this is my first time posting an answer i was just having fun with the code box抱歉，这是我第一次发布答案，我只是在玩代码框

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 无法在页面底部正确显示页脚 - CSS Only“Sticky”页脚 - Cannot display footer at the bottom of the page correctly - CSS Only "Sticky" footer 粘页脚+浮动元素 - Sticky footer + floating elements 粘性页脚未放置在底部 - Sticky footer is not placed at the bottom Angular 2 底部的粘性页脚 - Sticky footer at the bottom in Angular 2 粘性页脚引导程序 4 不在底部 - Sticky Footer Bootstrap 4 Not At Bottom 页面底部的粘性页脚 - Sticky Footer at the bottom of the page 保持页脚在底部但不粘？ - Keep footer at bottom but not sticky? 底部的粘性页脚 - Sticky footer at the bottom 如何使用带有页脚的 CSS 制作粘性底部导航 - How to make a sticky bottom navigation using CSS with Footer 页脚未浮在底部 - Footer Not floating on bottom
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM