html – 如何在页眉和页脚之间显示空div?

前端之家收集整理的这篇文章主要介绍了html – 如何在页眉和页脚之间显示空div?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我试图在我的页眉和页脚之间创建一个空div,因为我的网页有一个背景图片,我想要清除任何元素.

完整代码here

* {
  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

我希望这有帮助.

原文链接:https://www.f2er.com/html/426244.html

猜你在找的HTML相关文章