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

问题描述 投票：0回答：2

嗨，我是学习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;
}
html css background footer overlapping
2个回答
0
投票

问题出在你的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>
0
投票

首先，你的页脚没有像</footer>这样的结束标记

其次，像footer class =“footer”一样在你的页脚中添加类，或者将整个东西包装成div class =“footer”然后在css中添加一个。（点）在css中的页面，如.footer {//something here}然后添加clear：both属性无论你在CSS中拥有什么。

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

clear属性告诉浮动元素的哪些元素不能浮动。

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

以防万一：尽管明确：两者兼而有之。如果它没有工作改变位置相对。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.