Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

这是CSS的外观。

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

Answer 2



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>

你去吧。我已经改变了一些事情，但一切都应该清楚。

干杯。

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

2 个答案: