我正在处理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;
答案 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>
你去吧。
我已经改变了一些事情,但一切都应该清楚。
干杯。