我试图在我的页眉和页脚之间创建一个空div,因为我的网页有一个背景图片,我想要清除任何元素.
* {
Box-sizing: border-Box;
}
html {
font-size: 16px;
background: url('http://placekitten.com/200/300') no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*-------------- HEADER -----------------------*/
a {
text-decoration: none;
color: black;
}
#header h1 {
font-family: "Frijole",cursive;
float: left;
padding-left: 20px;
}
#header ul {
font-family: "Frijole",cursive;
float: right;
padding: 20px 20px 0 0;
display: inline-block;
}
#header ul,li {
display: inline-block;
margin-bottom: 5px;
}
/*-------------- EMPTY DIV -----------------------*/
#empty_div {
height: 800px;
}
/*-------------- FOOTER -----------------------*/
#footer {
clear: both;
padding-left: 20px;
text-align: center;
}
#footer p {
margin: 5px 0;
}
.social_icon {
display: inline;
width: 1.25rem;
height: 1.25;
margin-right: 0.3215rem;
margin-bottom: 0;
}
我可以使空div显示并占据页面的整个高度(因此它会在页眉和页脚之间创建空白空间)吗？
我设置了一个值(例如,min-height：800px),但是在调整浏览器大小时(我尝试使用开发人员工具在不同的设备上显示),页脚放置在整个地方而从不在页面底部.
最佳答案
我想这就是你想要做的.
全屏打开以查看更好的结果.
#header{
background: #ebebeb;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#footer{
background: #dbdbdb;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
默认情况下,div的位置是静态的.您需要将其设置为绝对或固定,然后添加顶部或左侧或底部或右侧等属性,以将元素精确放置在您想要的位置.
这里有一些链接,你可以看到位置之间的区别：绝对;和位置：固定;
http://www.w3schools.com/cssref/pr_class_position.asp
http://www.w3schools.com/css/css_positioning.asp
我希望这有帮助.
