个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在使用粘性页脚并有一个 div，我需要一直向下延伸到页脚。不幸的是，当我添加 height: 100% 时，它没有帮助。我还尝试让它在 css 中显示为表格，但这也无济于事。
你可以在这里看到:http://jsfiddle.net/NDk5f/2/
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>
<meta charset="utf-8">
<link href="css/test.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
Navbar
</div>
<div id="wrap">
<div class="container fill">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
CSS:
*{
margin: 0;
}
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
#push,
#footer {
height: 50px;
}
#footer {
background-color: #f5f5f5;
}
/* Apply class .fill to div to be stretched to bottom of page */
.fill{
height:100%;
display:table;
width: 100%;
margin-top: -50px;
padding: 50px 0 0 0; /*set left/right padding according to needs*/
-moz-box-sizing: border-box;
box-sizing: border-box;
background: red;
padding-top:75px;
}
.fill .row {
height: 100%;
display: table-row;
}
.container
{
width: 940px;
}
.container {
margin-right: auto;
margin-left: auto;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
.navbar {
position: relative;
z-index: 2;
margin-bottom: 20px;
overflow: visible;
background-color: orange;
}
最佳答案
最简单的方法是使用 box-sizing: border-box 并在元素上设置固定的百分比高度。如果您正在寻找页脚/导航的固定高度和内容的动态高度，这将很棘手。
通常我使用一个包装器，它是 position: absolute 到标题下方和页脚上方的视口(viewport)，然后在其中使用一个 div 用于内容，它使用 height: 100 %
第二种方法:
<nav>nav</nav>
<div id="wrap">
<div class="content">content</div>
</div>
<footer>footer</footer>
html,body { margin: 0 }
nav, footer { height: 20px; background: blue }
footer { position: absolute; bottom: 0; width: 100% }
#wrap { background: gray; position: absolute; bottom: 20px; top: 20px; right: 100px; left: 100px }
#wrap .content { height: 100% }
包装器将在调整窗口大小时充当内容的固定高度。
幸运的是，随着浏览器采用 css3，使用 flexbox 会更容易。
关于html - 如何使 div 扩展到粘性页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21566920/
24
4
0
如何将浮点 10 字节十六进制字符串(Delphi 中的扩展数据类型)转换为 C# 数据类型？ 例如:00 00 00 00 00 00 00 80 ff 3f 在 Delphi 1 最佳答案 涉及同
我正在阅读 this page上面写着 If one of the strings has an encoding prefix and the other doesn't, the one that
我有以下代码(作为示例)，我想对其进行调整，以使功能区扩展到整个 xrange，如 geom_hline()做。功能区指示哪些值在可接受的范围内。在我的实际应用程序中，有时没有上限或下限，因此 hli
去年，斯科特·格思里 stated “如果您想要对执行的 SQL 进行绝对控制，您实际上可以覆盖 LINQ to SQL 使用的原始 SQL”，但我找不到描述可扩展性方法的文档。 我想修改以下 LIN
我尝试在我的应用中创建一个抽屉导航。我有 3 个当前选项(查看、声明、报告)，当然这 3 个 Activity 已扩展到 fragment。在View 中，它有一个next 按钮，该按钮将转到另一个页
很抱歉，如果我的问题被重复，但我无法(或不知道如何谷歌)找到答案。我想使用 rxlifecycle-navi 库来将 rxjava 绑定(bind)到生命周期，所以我需要扩展 NaviActivity
有这个html: aaa 做的时候: $('#hi1').sayHi(); 我想收到一条“嗨”提醒 有人知道这是怎么做到的吗？ 最佳答案 了解更多关于jQuery plugin authoring
我有一个 UIImageView 和一个 UITextView。当点击 UITextView 时，我需要 UITextView 在 UIImageView 上展开。我不知道该怎么做。 从这里 为此 最
以下语句: URLClassLoader ucl = (URLClassLoader) ClassLoader.getSystemClassLoader(); Class uclc = ucl.get
以下语句: URLClassLoader ucl = (URLClassLoader) ClassLoader.getSystemClassLoader(); Class uclc = ucl.get
$的意思是什么!在 shell 或 shell 脚本中？我正在尝试理解具有以下内容的脚本。 local@usr> a=1 local@usr> echo $a 1 local@usr> echo $!
我正在 GWT 中设计一个简单的应用程序，并且在客户端有不同的 View 。每个 View 都从 SimplePanel 扩展而来，并将根据需要添加到 RootPanel。 我的第一个 View 是
我尝试在 SQL Azure 选项卡中从 S2 扩展到 S3，但 S3 似乎不可用，尽管它已被引入。另外，我还有大量可用的 DTU，即 1900 左右。是否无法扩展到 S3？我是否需要导出数据库，然后
我有一个带有 JS、html 和 css 的自定义视频播放器。我的问题的关键是我没有预料到将其从一个视频扩展到两个视频，我希望重构它，以便我可以在一个页面上播放多个视频。我尝试将所有内容重写为 for
我当前正在开发的应用程序需要可扩展的实时通信。我们一直在研究并尝试 Firebase 实时数据库和 firestore。看来Firebase实时数据库更加成熟并且经过测试，而firestore仍处于测
当 pod 被 daemonset 控制时，pod 会出现一些错误，状态会是 CrashLoopBackOff ，我想删除这些 Pod 但不想删除 DaemonSet。 所以我想把daemonset缩
我有 Jframe 表单并创建了从中绘制图形的类，为此我需要将该 void 类扩展为 jframe 表单 package grafiktest; import java.awt.Color; impo
在布局和尺寸策略方面，我从来都不是太出色，所以这可能是一个简单的答案，但就是这样。 当我向 QTabWIdget 添加新选项卡并将小部件设置为 QSplitter 时，拆分器将使用给定的全部空间量。但
我在将我的 S4 对象转换回列表时遇到了一些问题。例如，以下嵌套的 S4 类: setClass("nssItem", representation(value = "numeric
在阅读了 DDD 的一些页面后，我了解了存储库模式，然后在应用程序中成功使用了它(我真的很喜欢它)；然后我注意到 EntityManager 是 generic-repository-like，但是当
我是一名优秀的程序员,十分优秀！