如何让页脚在 CSS 中不重叠地停留在页面底部

How do i make my footer stay at the bottom of my page in CSS without overlapping

嗨,我是新手 HTML/CSS,我目前正在努力了解为什么我的页脚与我的网页重叠,我尝试使用 postion: fixed; & 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;
}

首先,你的页脚没有像</footer>

这样的结束标签

Second,将 class 添加到页脚,例如 footer class="footer" 或也许将整个内容包装成 div class="footer" 然后在 [=37= 中的页脚前添加一个 .(点) ] 喜欢 .footer {//something here} 然后将 clear: both 属性 添加到 css.

中的任何内容
.footer {
    width:100%;
    background-color: darkorange;
    padding:50px 0px;
    position:fixed;
    clear: both; // like this
}

清楚的属性告诉元素浮动元素不能浮动在哪一边。

通过使用两个值进行清除。您可以指定任何元素都不能浮动在元素的右侧或左侧。

以防万一:同时尝试清除:两者。如果它不起作用,请将位置更改为相对位置。

问题出在你的CSS之外footer。在选择器 .slider, .slider ul, .slider ul li 中,您有 height: 700px;。因为你有 3 个这样的元素,所以它实际上被拉伸 2100 px! 因为你将 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>