CSS,ul在页面底部创建一个空白区域

时间:2015-10-11 15:18:37

标签: html css

我正在处理ul以在页面底部显示信息,但它会在底部创建一个巨大的空白区域。

我希望我的bottominfo不会成为屏幕高度的前100%的一部分,因此用户必须向下滚动。



body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 150%;
}
.bottomInfo ul li {
  display: block;
  padding: 7px;
  color: #c0c0c0;
}
.bottomInfo ul li:first-child {
  padding: 0px;
  margin: 0px;
  bottom: 11px;
  font-size: 100%;
}
.bottomInfo ul {
  top: 20%;
  left: 10%;
  margin: 5px;
  position: absolute;
}
.bottomInfo {
  color: white;
  width: 100%;
  height: 50%;
  top: 100%;
  background-color: #003047;
  position: absolute;
  font-size: 75%;
}

<div class="bottomInfo">
  <ul>
    <li>About</li>
    <li>Newsletter</li>
    <li>Updates</li>
    <li>About the organisation</li>
    <li>Complaints</li>
  </ul>
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

问题在于你指定身高达到150%所以它占据了很高的高度。从身体移除高度,它将采用自动高度并将您的底部信息推送到视口下方。

这是CSS的外观。

body {
margin: 0;
padding: 0;
width: 100%; 
height: 100%; //or remove it
}

答案 1 :(得分:0)

body {
  margin: 0;
  padding: 0;
  width: 100%;

}
.placeholder{height:1000px;width:90%;border:5px solid pink;}
.bottomInfo ul li {
  display: block;
  padding: 7px;
  color: #c0c0c0;
}
.bottomInfo ul li:first-child {
  padding: 0px;
  margin: 0px;
  bottom: 11px;
  font-size: 1em;
}
.bottomInfo ul {
  top: 20%;
  left: 10%;
  margin: 5px;
 
}
.bottomInfo {
  position:fixed;
  bottom:0;left:0;
  color: white;
  width: 100%;
  height: 100px;
  background-color: #003047;
  font-size: .75em;
}
<div class="placeholder"></div>
<div class="bottomInfo">
  <ul>
    <li>About</li>
    <li>Newsletter</li>
    <li>Updates</li>
    <li>About the organisation</li>
    <li>Complaints</li>
  </ul>
</div>
你去吧。 我已经改变了一些事情,但一切都应该清楚。

干杯。