Question

＆＃13;

figure, figcaption {display: block;}

＆＃13;

html{
    background: url(../images/mb-bg-fb-03.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}
body{
    height: 100%;
}

header{
    background-image: url("../images/naviBack.jpg");
    opacity: 0.8;

}


#NavPos{
    text-align: center;
}

#page{
    margin: 0 auto;
    position: relative;
}
.nm{
    color:#C3D9FF;
}


.content{
    margin: 2% 10%;
    background-color:#F9F7ED;
    opacity: 0.8;



}

.pic{
    border: dotted;
    width: 260px;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
}
img{
    max-width: 100%;
}


.descr {
    display: inline-block;
    vertical-align: middle;
    border: dotted;
}
.desctext{
    overflow: hidden;
    max-width: 21ch;

}

a{
    text-decoration: none;

}

footer{

    padding-left: 10%;
    width: 100%;
    height: 100px;
    background:#36393D;
    opacity: 0.9;
    text-align: center;
}

ul{





}
li{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;

}


#fb{
color: #3b5998;
}
#ok{
    color:#ed812b;

}
#insta{
color:  #ded1c1;
}
#tw{

color: #1dcaff
}
#copyr{
    color: #FF1A00;

}

.fblock{
    display: block;
}

＆＃13;

我无法将页脚粘到底部。我每次添加<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/Backmain.css"> <link rel="stylesheet" type="text/css" href="css/NaviStyle.css"> <link rel="stylesheet" type="text/css" href="css/w3.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/ContentStyle.css"> <link rel="stylesheet" type="text/css" href="css/FooterStyle.css"> <title>Poxanakum.am</title> </head> <body> <div id="page"> <header> <nav class="w3-topnav w3-padding-32" id="NavPos"> <a href="#" id="3"><i class="fa fa-home fa-5x nm" ></i></a> <div class="w3-dropdown-hover"> <a href="#"><i class="fa fa-newspaper-o fa-5x nm"></i></a> <div class="w3-dropdown-content w3-card-4"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 3</a> <a href="#">Link 3</a> <a href="#">Link 3</a> <a href="#">Link 3</a> </div> </div> <a href="#"><i class="fa fa-user-plus fa-5x nm"></i></a> <a href="#"><i class="fa fa-question fa-5x nm"></i></a> </nav> </header> <div class="conten"> <article class="w3-border w3-container content"> <span class="pic"> <img src="include/inclItem.jpg" alt="ps"> </span> <span class="descr"> <a title="description" href="#"><p class="desctext">Playstation 4</p></a> </span> </article> <article class="w3-border w3-container content"> <span class="pic"> <img src="include/inclItem.jpg" alt="ps"> </span> <span class="descr"> <a title="description" href="#"><p class="desctext">Playstation 4</p></a> </span> </article> </div> <footer class="w3-container fot" id="footer"> <ul> <li> <a href="#" class="fblock"><i class="fa fa-facebook-square fa-5x" id="fb"></i></a> </li> <li> <a href="#" class="fblock"><i class="fa fa-odnoklassniki-square fa-5x" id="ok"></i></a> </li> <li> <a href="#" class="fblock"><i class="fa fa-twitter-square fa-5x" id="tw"></i></a> </li> <li> <a href="#" class="fblock"><i class="fa fa-instagram fa-5x" id="insta"></i></a> </li> <li> <a href="#" class="fblock"><i class="fa fa-copyright fa-5x" id="copyr"></i></a> </li> </ul> </footer> </div> </body> </html>块时都需要它;页脚停留在底部。我尝试了很多方法。但它总是很高。我无法使其响应。

Answer 1

您需要将position:fixed添加到页脚。

html{
    background: url(../images/mb-bg-fb-03.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}
body{
    height: 100%;
}

header{
    background-image: url("../images/naviBack.jpg");
    opacity: 0.8;

}


#NavPos{
    text-align: center;
}

#page{
    margin: 0 auto;
    position: relative;
}
.nm{
    color:#C3D9FF;
}


.content{
    margin: 2% 10%;
    background-color:#F9F7ED;
    opacity: 0.8;



}

.pic{
    border: dotted;
    width: 260px;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
}
img{
    max-width: 100%;
}


.descr {
    display: inline-block;
    vertical-align: middle;
    border: dotted;
}
.desctext{
    overflow: hidden;
    max-width: 21ch;

}

a{
    text-decoration: none;

}

footer{

    padding-left: 10%;
    width: 100%;
    height: 100px;
    background:#36393D;
    opacity: 0.9;
    text-align: center;
}

ul{





}
li{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;

}


#fb{
color: #3b5998;
}
#ok{
    color:#ed812b;

}
#insta{
color:  #ded1c1;
}
#tw{

color: #1dcaff
}
#copyr{
    color: #FF1A00;

}

.fblock{
    display: block;
}
#footer{
position:fixed;
width:100%;
display:block;
bottom:0;
left 0;
right : 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/Backmain.css">
    <link rel="stylesheet" type="text/css" href="css/NaviStyle.css">
    <link rel="stylesheet" type="text/css" href="css/w3.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/ContentStyle.css">
    <link rel="stylesheet" type="text/css" href="css/FooterStyle.css">
    <title>Poxanakum.am</title>
</head>
<body>
 <div   id="page">
        <header>
            <nav class="w3-topnav w3-padding-32" id="NavPos">
                <a href="#" id="3"><i class="fa fa-home fa-5x nm" ></i></a>
                        <div class="w3-dropdown-hover">
                                 <a href="#"><i class="fa fa-newspaper-o fa-5x nm"></i></a>
                                <div class="w3-dropdown-content w3-card-4">
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                    <a href="#">Link 3</a>
                                    <a href="#">Link 3</a>
                                    <a href="#">Link 3</a>
                                    <a href="#">Link 3</a>
                                </div>
                        </div>
                <a href="#"><i class="fa fa-user-plus fa-5x nm"></i></a>
                <a href="#"><i class="fa fa-question fa-5x nm"></i></a>

            </nav>
        </header>

   <div class="conten">
        <article class="w3-border w3-container content">
            <span class="pic">
                <img src="include/inclItem.jpg" alt="ps">
            </span>
            <span class="descr">
                <a title="description" href="#"><p class="desctext">Playstation 4</p></a>
            </span>

        </article>

         <article class="w3-border w3-container content">
            <span class="pic">
                <img src="include/inclItem.jpg" alt="ps">
            </span>
            <span class="descr">
                <a title="description" href="#"><p class="desctext">Playstation 4</p></a>
            </span>

         </article>
   </div>



    <footer class="w3-container fot" id="footer">
        <ul>
            <li>
                <a href="#" class="fblock"><i class="fa fa-facebook-square fa-5x" id="fb"></i></a>            </li>
            <li>
                <a href="#" class="fblock"><i class="fa fa-odnoklassniki-square fa-5x" id="ok"></i></a>
            </li>
            <li>
                <a href="#" class="fblock"><i class="fa fa-twitter-square fa-5x" id="tw"></i></a>
            </li>
            <li>
                <a href="#" class="fblock"><i class="fa fa-instagram fa-5x" id="insta"></i></a>
            </li>
            <li>
                <a href="#" class="fblock"><i class="fa fa-copyright fa-5x" id="copyr"></i></a>
            </li>
        </ul>
    </footer>
</div>








</body>

</html>

Answer 2

footer {
position: fixed;
bottom: 0px; left: 0px;
}

添加文章标签时在底部粘贴页脚

2 个答案: