gpt4 book ai didi

html - 如何使用溢出 :hidden;? 将页脚强制到包装器的底部

转载 作者:行者123 更新时间:2023-11-28 17:47:23 25 4
gpt4 key购买 nike

我正在制作带有 overflow:hidden; 的包装器、带有 float:left; 的导航栏、内容和页脚的网页。我在导航栏中添加了填充,这样它的背景颜色就可以到达包装器的末尾,并将包装器设置为 overflow:hidden; 这样它就会展开以匹配导航栏。问题是我无法让页脚到达底部。

CSS

#nav{
background:skyblue;
padding:8px 8px 350px 8px;
font-weight:bold;
float:left;}

#wrapper{
width:80%;
min-width:960px;
background:#90C7E3;
box-shadow: 8px 8px 8px gray;
margin-left:auto;
margin-right:auto;
overflow:hidden;}

#footer{
font-size:75%;}

html

  <body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="home.html">H</a>
<li><a href="a.html">A</a>
<li><a href="b.html">B</a>
<li><a href="c.html">C</a>
</ul>
</div>
<div id="content">
<h2>content</h2>
<p>contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
</div>
<div id="footer">
<p>footerfooterfooterfooterfooter<br>
<em>footerfooterfooter</em></p>
</div>
</div>
</body>

我不确定我是否正确发布了代码,因为这是我第一次在此网站上发布。

最佳答案

在页脚中使用 clear:both。

My fiddle

  #footer{
font-size:75%;
clear:both;}

关于html - 如何使用溢出 :hidden;? 将页脚强制到包装器的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23004990/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com