如何使页脚停留在CSS的页面底部而不重叠

时间：2019-02-28 00:12:48

标签： html css background footer 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 个答案:

答案 0 :(得分：0)

首先，您的页脚没有结尾标记，例如</footer>

第二，将类添加到您的页脚中，例如 footer class =“ footer” ，或者将整个内容包装到 div class =“ footer” ，然后在诸如.footer {//something here}之类的CSS的页脚前面添加一个。（点） 然后添加clear：这两个属性都将添加到CSS中。

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

clear属性指示浮动元素不能在元素的哪一侧浮动。

使用两者值进行清除。您可以指定没有元素不能在元素的右侧或左侧浮动。

以防万一：尝试清除时：两者都有。如果不起作用，请将位置更改为相对位置。

答案 1 :(得分：0)

问题出在footer之外的CSS中。在选择器.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>

相关问题
最新问题