html - 强制页脚在底部

标签 html css

好的,当没有足够的内容自然地将页脚推到底部时,我无法强制将页脚放在底部。

我部分解决了问题。这是非常简单的设计,我有页眉、内容和页脚,都在 div 包装器中。

html,
body {

margin:0;
padding:0;
height:100%;
font: sans-serif;
}

#wrapper {
min-height:100%;
position:relative;
}

#content {
padding: 2% 5%;
max-width: 940px;
margin: 0 auto;
padding-bottom:80px; /* Height of the footer element */
clear: both;
background-color: yellow;
}

footer {
background:#ffab62;
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
font-size: 0.75em;
text-align: center;
padding-top: 30px;
clear: both;
color: #ccc;
}

我使用背景颜色来查看页面上元素的位置。因此,当底部没有足够的内容页脚时,就可以了。当有足够多的内容页脚与其中一些重叠时,当我将位置放在页脚相对而不是绝对位置时它会得到修复但是然后在没有足够内容页脚的页面上不在底部..修复另一个不好并修复其他第一页不好..有什么解决方案可以帮助我解决这个问题......

最佳答案

min-height: 调整为您希望页脚结束的最小值,100% 会将其放在内容的正下方(无论如何都应该是默认的,甚至没有声明) 你说的时间不够长;制作一个 minimum-height: 900px; 或类似于您希望最小终点成为页脚所在位置的位置。

如果页脚位于 HTML 中的正确位置,但它向上 float 。然后考虑以下内容。

display:inline-block;

添加到页脚。

footer {
   display: inline-block;
}

如果这些都不起作用,请显示您的 HTML!

关于html - 强制页脚在底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30901788/

相关文章:

javascript - 使用 Cloudflare worker 注入(inject) HTML

javascript - 如何避免为同一链接创建新选项卡(已在浏览器中打开)

javascript - HTML5 Canvas : Draw rectangle around text?

java - selenium 找不到出现在我的浏览器中的 iframe

相对于父元素的边框调整子元素的大小

html - 创建全屏 div

html - 当光标悬停在按钮上时,我想更改 Pardot 中的提交颜色

html - 使用 Bootstrap 时,我无法将 ASP 控件的高度降低到我想要的高度

php - CKEditor 样式不起作用

javascript - 允许在之后重复插入,但在之前则不允许