【发布时间】：2023-03-16 09:54:01
【问题描述】：
由于内容不足，我的页脚太大了。我试图通过向 CSS 添加 height:10% 来限制大小，但它不起作用。我该如何限制它。例如到屏幕的 10%？ （我希望它具有响应性）。
以下是 HTML：
<div class="wrapper col7">
<div id="copyright">
<div class="list-group" style="float:left">
<a class="list-group-item" href="" target="_blank"><i class="fa fa-linkedin-square fa-5x fa-cog-li"></i></a>
</div>
<br/> <p>Desgined by </p>
<div class="clear"></div>
</div>
</div>
</div>
以下是 CSS：
div.wrapper{display:block; width:100%; margin:0; text-align:left;}
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{margin:0 0 20px 0; padding:0 0 8px 0; font-size:22px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; border-bottom:1px dashed #DDDDDD;}
.col7, .col7 a{color:#CCCCCC; background-color:#2E2E2E;}
#copyright{padding:20px 0;}
#copyright p{display:block; float:right; text-align:right; margin:0; padding:0; width:200px;}
#copyright ul{display:block; float:left; margin:0; padding:0; width:700px;}
#copyright li{display:inline; margin-right:8px; padding-right:10px; border- right:1px solid #CCCCCC;}
#copyright li.last{margin-right:0; padding-right:0; border-right:none;}
【问题讨论】：
-
如果页面高度仅为屏幕的 50%，要减小页脚的大小，您需要增加页面高度。最简单的方法是简单地给主要内容区域一个最小高度。
-
我正在使用模板，但它没有为主要内容设置任何最小高度。但我宁愿将 70% 用于主要内容，其余用于页脚和页眉。无论如何，您能解释一下我该如何解决您的问题吗？
-
为了进一步阐述凯文的评论，您的版权没有定义背景颜色。所以你看到的根本不是一个巨大的页脚，它是一个位于内容底部的小页脚，下面剩余的灰色只是默认的正文背景。它会产生大页脚的错觉，但从技术上讲，这不是正在发生的事情。你需要按照凯文的建议去做。不要害怕javascript。或者你可以尝试在上面的内容中添加一个 min-height:80vh
-
亲爱的，谢谢，但考虑到我是初学者，你能帮我编辑一下代码吗？
-
您必须先显示完整的 html。在这种情况下，我们不知道版权之上是什么