如何使页脚停留在CSS的页面底部而不重叠
[英]How do i make my footer stay at the bottom of my page in CSS without overlapping
问题描述
嗨，我刚开始学习HTML / CSS，我目前正努力查看为什么页脚与网页重叠的原因，我尝试使用位置：固定； ＆bottom：0; 为了将其保持在底部，但无法正常工作，答案可能对某人来说很明显，我将不胜感激，请参见下面的html / css代码。
网页图片> https://imgur.com/a/GT02Ggx
HTML
<body>
<section class="slider">
<ul class="slider-carousel" id="slider-carousel">
<li class="img1">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img2">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img3">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
</ul>
<div class="login-box">
<h1>Login</h1>
<div class="textbox">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" name="" value="">
</div>
<div class="textbox">
<i class="fas fa-lock"></i>
<input type="text" placeholder="Password" name="" value="">
</div>
<input class="btn" type="button" name="" value="Sign In">
</div>
</section>
<footer>
<div class="wrapper">
<nav>
<ul>
<li><a href="">Log In</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">My Surveys</a></li>
</ul>
</nav>
</div>
<script src="main.js"></script>
</body>
CSS
}
body{
height:100%;
background-color:black !important;
}
/*-------------header-----------*/
header
{
height:110px;
line-height: 110px;
position:fixed;
z-index:1;
width:100%;
}
.secondary{
background-color:darkorange;
box-shadow:0px 0px 15px 0px;
transition:all 0.5s ease-in-out;
}
/*-------------nav-----------*/
ul
{
list-style:none;
}
ul li
{
display:inline-block;
}
header nav
{
float: right;
}
.logo img
{
margin-top:25px;
}
header nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
header nav ul li a:hover
{
text-decoration: none;
color:black;
}
/*-------------slider-----------*/
.img1
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work.jpg);
background-size:100% 100%;
}
.slider,.slider ul,.slider ul li
{
height:700px;
width:100%;
color:white;
text-align: center;
padding:0px;
}
.slider h2
{
font-weight: bold;
margin-top:260px;
}
.slider span
{
color:orange;
}
.slider a
{
padding: 10px 40px;
margin-right: 10px;
}
.slider a.btn-half
{
background-color: orange;
color: white;
}
.slider a.btn-half:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.slider a.btn-full
{
background-color: black;
color: white;
}
.slider a.btn-full:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.img2
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work2.jpg);
background-size:100% 100%;
}
.img3
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work3.jpg);
background-size:100% 100%;
}
.slider i
{
font-size:30px;
margin-right:10px;
}
/*-------------login-----------*/
.login-box
{
width:280px;
position:absolute;
top:1000px;
left:50%;
transform: translate(-50%, -50%);
color:white;
}
.login-box h1
{
width:100px;
font-size:40px;
border-bottom: 6px solid darkorange;
margin-bottom:50px;
padding:13 px 0;
}
.textbox
{
width:100%;
overflow:hidden;
font-size:20px;
padding:8px 0;
margin:8px 0;
border-bottom: 1px solid darkorange;
}
.textbox i
{
width:26px;
float:left;
text-align:center;
}
.textbox input
{
border:none;
outline:none;
background:none;
color:white;
font-size:17px;
width:80%;
float:left;
margin:0 10px;
}
.btn
{
width:100%;
background:none;
border:2px solid darkorange;
color:white;
padding:5px;
font-size:17px;
cursor:pointer;
margin:12px 0;
}
.btn:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
/*-------------footer-----------*/
.footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
position:fixed;
}
footer nav
{
text-align:center;
}
footer nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
footer nav ul li a:hover
{
text-decoration: none;
color:black;
}
2 个解决方案
解决方案1
0 2019-02-28 00:23:44
首先 ，您的页脚没有结束标签，例如</footer>
其次 ，将类添加到您的页脚中，例如footer class =“ footer”，或者将整个内容包装到div class =“ footer”中，然后在页脚前面的.footer {//something here}添加。（dot），例如.footer {//something here}这两个属性，无论你有你的CSS：然后加清晰。
.footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
position:fixed;
clear: both; // like this
}
clear属性指示浮动元素不能在元素的哪一侧浮动。
通过同时使用两个值进行清除。 您可以指定没有元素不能在元素的右侧或左侧浮动。
以防万一：尝试清除时：两者都有。 如果不起作用，请将位置更改为相对。
解决方案2
0 已采纳 2019-02-28 01:00:37
问题出在footer之外的CSS中。 在选择器.slider, .slider ul, .slider ul li ，您的height: 700px; 。 因为您具有3个元素，所以实际上它被拉长了2100像素！ 因为您已将footer设置为position: fixed; 它希望保留在屏幕上的那个位置，即使那里已经有内容。
这是这两个选择器的外观：
.slider, .slider ul, .slider ul li{
width:100%;
color:white;
text-align: center;
padding:0px;
}
footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
}
body{ height:100%; background-color:black !important; } /*-------------header-----------*/ header { height:110px; line-height: 110px; position:fixed; z-index:1; width:100%; } .secondary{ background-color:darkorange; box-shadow:0px 0px 15px 0px; transition:all 0.5s ease-in-out; } /*-------------nav-----------*/ ul { list-style:none; } ul li { display:inline-block; } header nav { float: right; } .logo img { margin-top:25px; } header nav ul li a { padding-right: 25px; font-weight: bold; color: white; transition: all 0.5s ease-in; } header nav ul li a:hover { text-decoration: none; color:black; } /*-------------slider-----------*/ .img1 { background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work.jpg); background-size:100% 100%; } .slider, .slider ul, .slider ul li{ width:100%; color:white; text-align: center; padding:0px; } .slider h2 { font-weight: bold; margin-top:260px; } .slider span { color:orange; } .slider a { padding: 10px 40px; margin-right: 10px; } .slider a.btn-half { background-color: orange; color: white; } .slider a.btn-half:hover { opacity:0.7; transition:0.5s ease-in; } .slider a.btn-full { background-color: black; color: white; } .slider a.btn-full:hover { opacity:0.7; transition:0.5s ease-in; } .img2 { background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work2.jpg); background-size:100% 100%; } .img3 { background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work3.jpg); background-size:100% 100%; } .slider i { font-size:30px; margin-right:10px; } /*-------------login-----------*/ .login-box { width:280px; position:absolute; top:1000px; left:50%; transform: translate(-50%, -50%); color:white; } .login-box h1 { width:100px; font-size:40px; border-bottom: 6px solid darkorange; margin-bottom:50px; padding:13 px 0; } .textbox { width:100%; overflow:hidden; font-size:20px; padding:8px 0; margin:8px 0; border-bottom: 1px solid darkorange; } .textbox i { width:26px; float:left; text-align:center; } .textbox input { border:none; outline:none; background:none; color:white; font-size:17px; width:80%; float:left; margin:0 10px; } .btn { width:100%; background:none; border:2px solid darkorange; color:white; padding:5px; font-size:17px; cursor:pointer; margin:12px 0; } .btn:hover { opacity:0.7; transition:0.5s ease-in; } /*-------------footer-----------*/ footer { width:100%; background-color: darkorange; padding:50px 0px; } footer nav { text-align:center; } footer nav ul li a { padding-right: 25px; font-weight: bold; color: white; transition: all 0.5s ease-in; } footer nav ul li a:hover { text-decoration: none; color:black; }
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="./style.css"> </head> <body> <section class="slider"> <ul class="slider-carousel" id="slider-carousel"> <li class="img1"> <h2>Slider<span>Slider</span></h2> <p>Hello World</p> <i class="fab fa-apple"></i> <i class="fab fa-android"></i> <i class="fab fa-windows"></i> <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa </p><br> <a href="" class="btn btn-half">Get Started</a> <a href="" class="btn btn-full">Lets Go</a> </li> <li class="img2"> <h2>Slider<span>Slider</span></h2> <p>Hello World</p> <i class="fab fa-apple"></i> <i class="fab fa-android"></i> <i class="fab fa-windows"></i> <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa </p><br> <a href="" class="btn btn-half">Get Started</a> <a href="" class="btn btn-full">Lets Go</a> </li> <li class="img3"> <h2>Slider<span>Slider</span></h2> <p>Hello World</p> <i class="fab fa-apple"></i> <i class="fab fa-android"></i> <i class="fab fa-windows"></i> <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa </p><br> <a href="" class="btn btn-half">Get Started</a> <a href="" class="btn btn-full">Lets Go</a> </li> </ul> <div class="login-box"> <h1>Login</h1> <div class="textbox"> <i class="fas fa-user"></i> <input type="text" placeholder="Username" name="" value=""> </div> <div class="textbox"> <i class="fas fa-lock"></i> <input type="text" placeholder="Password" name="" value=""> </div> <input class="btn" type="button" name="" value="Sign In"> </div> </section> <footer> <div class="wrapper"> <nav> <ul> <li><a href="">Log In</a></li> <li><a href="">FAQ</a></li> <li><a href="">My Surveys</a></li> </ul> </nav> </div> </footer> <script src="main.js"></script> </body> </html>
如何让我的页脚始终停留在页面底部，即使页面内容小于屏幕？
[英]How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.