javascript - 添加文章标签时将页脚固定在底部

标签 javascript jquery css html 

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;
}
<!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>

我无法将页脚固定在底部。我每次添加 <article> 时都需要它堵塞;页脚保持在底部。我尝试了很多方法。但它总是很高。而且我无法使其响应。

最佳答案

您需要将 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>

关于javascript - 添加文章标签时将页脚固定在底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34855444/

上一篇：javascript - 如何从 input type=file 获取数据，修改它，然后将其插入到这个 input js 中

下一篇：javascript - 在页面加载时自动聚焦 dxtextbox 并显示 dxTooltip 作为验证消息

相关文章：

html - CSS 从矩形中剪出圆形

html - 如何通过 HTM/CSS 将 2,3 或 4 个盒子并排放置

javascript - 网络 : how to zoom into a grid item and keep the item centralized in the viewport

javascript - 通过 Express 提供时，Index.html 不呈现组件

javascript - 从 JavaScript 访问 TypeScript 函数

ajax - Ajax 发布后重定向

javascript - 在 angularjs View 中加上减号

javascript - 如何显示在密码输入类型中输入的文本，否则隐藏密码

jquery - 加载 Telerik MVC 网格状态

html - 线性渐变在 IE 11 中不起作用

©2024 IT工具网  联系我们