个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我的页面分为 3 个部分。 header main 和 footer。
header 固定在顶部并且是 109px 及其 6px 边框高度，所以 main 有109px 顶部边距。
我希望 main 延伸到页眉下方的整个页面并延伸到页脚，如果没有可用于将其向下推的内容，则应位于屏幕底部。
footer 的高度为 86px，因为顶部的边框为 80px 和 6px。 footer 到底部，main 延伸，但如果页面比页面长，则 footer 不会被向下推。
如果 main 的内容增加了，如何让 footer 保持在底部？
html {
height: 100%;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
/* ---------------------------------------------------------------- */
main {
padding-top: 120px;
/* eigendlich 109px */
padding-bottom: 150px;
/* eigendlich 86px */
text-align: center;
}
#all {
height: 100%;
}
#header {
background-color: #25211e;
border-bottom: 6px solid #1d1a18;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 103px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#heading {
font-family: "titlefont";
color: #c1b497;
font-size: 45px;
display: inline-block;
margin-bottom: 10px;
margin-top: 15px;
}
#footer {
background-color: #25211e;
border-top: 6px solid #1d1a18;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 80px;
z-index: 98;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
#credit {
font-family: "Helvetica";
font-size: 14px;
color: #c1b497;
font-weight: 600;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<script src="script.js"></script>
</head>
<body>
<div id="all">
<header id="header">
<h1 id="heading">My Page</h1>
</header>
<main id="main">
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
</main>
<footer id="footer">
<p id="credit">FOOTER</p>
</footer>
</div>
</body>
</html>最佳答案
你可以改变
position: fixed;
在你的 #footer CSS 中
html {
height: 100%;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
/* ---------------------------------------------------------------- */
#all {
height: 100%;
}
#header {
background-color: #25211e;
border-bottom: 6px solid #1d1a18;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 103px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#heading {
font-family: "titlefont";
color: #c1b497;
font-size: 45px;
display: inline-block;
margin-bottom: 10px;
margin-top: 15px;
}
main {
padding-top: 120px;
/* eigendlich 109px */
padding-bottom: 150px;
/* eigendlich 86px */
text-align: center;
}
#footer {
background-color: #25211e;
border-top: 6px solid #1d1a18;
text-align: center;
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 80px;
z-index: 98;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
#credit {
font-family: "Helvetica";
font-size: 14px;
color: #c1b497;
font-weight: 600;
} <div id="all">
<header id="header">
<h1 id="heading">My Page</h1>
</header>
<main id="main">
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
<h2>Content</h2>
</main>
<footer id="footer">
<p id="credit">FOOTER</p>
</footer>
</div>关于html - 页脚不会到达底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43685888/
24
4
0
我正在尝试制作一个程序，显示飞机到达和起飞的时间表，然后要求用户在 C 中输入时间。然后程序将找到最接近输入时间的到达时间用户。问题是它没有按预期工作，并且给我一个错误的到达时间，甚至不接近输入的时间
我有一个不断填充新信息行的 Excel 表，其中一列与联系客户的日期(有时为空 - 无需输入日期)相关，如果在 10 内没有收到回复从那以后的几天，我们必须发送提醒，如果过了 17 天，我们必须取消订
实际到达很简单，标签进入接收器天线范围，但是偏离是造成问题的原因。 首先，我们了解一些有关设置的信息。 标签: 它们以433Mhz的速度工作，每1.5秒钟发送一次“心跳”，移动时进入传输突发模式，这种
我构建了这段代码来从 URL 获取 XML我使用了 AsyncTask，当到达 getInputStream() 点时，半身应用程序仍然崩溃 重点是我想从 url 获取 XML 作为字符串。 我尝试不
所以我有一个 TDBGrid，我的目的是搜索 DBGrid 的 Fieldname 并将其与我的编辑的 Text 属性进行比较，如果它们相等，则 我想将找到匹配项的整列写入列表框。 通过带有 fiel
我会写得非常简单，因为实际的修复并不比我不理解的实际设计重要。似乎一旦我的 @RequestBody 命中 @Controller，有关 subtype 的信息就会丢失。 假设我们有: class A
所以我正在做这个简单的动态编程问题，关于达到 n一次只能走 1 或 2 步。我知道答案基本上是一个斐波那契序列，答案是:达到n-2的步骤数+ 到达 n-1 的步数. T(n) = T(n-1) +
(function start (){ $('.bar').each(function(i){ var $bar = $(this); $(this).append('')
我有一个程序，我在启动它之前要求用户输入。 public static void main(String args[]) { String database = JOptionPane.sho
就是这样，我必须在提交按钮上有一张图片，但它根本没有出现。 我希望它看起来像这样: 现在看到我的是这样的，我不明白为什么它没有出现在页面上。 HTML CSS #sognu { bac
click here 点击后重定向至 xyz.com/#contact， 现在我想获得div #abc的顶部位置 //set the value as a variable, and remove t
here is a fiddle to know where I am starting from 我要解决的问题涉及对单个 html 文件的内容进行“分页”，以一种将它们一次锁定在一个部分中的方式。
是否可以在传递页面部分时运行 javascript 函数？我想要实现的是类似于 Twitter Bootstrap 的 scrollspy。 最佳答案 您可以使用 waypoints 插件: http
我有一个可以动态调整其大小的 iframe。我通过父页面上的发布消息和监听器解决了这个问题，因此每次 iframe 的内容发生变化时，iframe 的大小也会发生变化，并且永远不会有滚动条。 在 if
我试图让我的导航栏在到达我在网站下方设置的 anchor 时变得透明。 这是我的HTML Home About Logo W
我写了一个简单的程序来管理姓名列表(下面是程序的一部分)。我希望函数“choice()”结束并返回到 main()——从而结束程序——当用户对变量“option”的输入为 4 时。然而，choice(
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a software
代码片段在 while 循环后有一个 EOF，之后必须再次重新打开文件 - fopen 被重用。我的问题是是否有办法避免这种笨拙的 fopen 双重使用或以某种方式不使用 EOF？ if (!(f=f
从这个页面: http://www.beta.inegi.org.mx/app/buscador/default.html?q=e15a61a 我正在尝试检索此网址: http://www.beta.
我使用维基百科的 API 来获取有关页面的信息。API 给我这样的 JSON: "query":{ "pages":{ "188791":{ "pageid":18879
我是一名优秀的程序员,十分优秀！