个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
26
4
所以我正在尝试使用 Bootstrap 制作一个很酷的投资组合登陆页面。
该模板包括一个固定的导航栏和一个粘性页脚。页面的其余部分是我想要填充的空白，基本上是一个巨大的背景，所以我放了一个测试段落元素来尝试看看如何调整它的大小。我想我可以只添加 CSS 规则使 body 的高度为 100%，但是当我这样做时我得到了溢出并且我的页脚不再位于页面底部。相反，我在底部有一点背景溢出。
我该如何解决这个问题？我将背景颜色设为亮黄色以尝试展示我的意思。感谢您的帮助!
这是 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Work in Progress</title>
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Portfolio</a>
</div>
<div id="navbar" class="navbar-collapse collapse"
aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true"
aria-expanded="false">Projects
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Rails Projects</a></li>
<li><a href="#">LAMP Projects</a></li>
</ul>
</ul>
</div>
</div>
</nav>
<div class="main">
<div class="container">
<p>Test text</p>
</div>
</div>
<!--footer-->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Contact info or whatever goes here.</p>
</div>
<div class="col-md-4 col-md-offset-4">
<p>More info or whatever goes here.</p>
</div>
</div>
</div>
</footer>
</body>
</html>
这是 CSS
html, body{
height: 100%
}
.main{
height: 100%;
background-color: #FFFF00;
margin-top: 50px;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #000;
color: #9d9d9d;
}
最佳答案
您可以使用此 CSS(position: relative 在正文和 .main 高度作为计算函数(100% 减去页脚高度):
html,
body {
height: 100%;
position: relative;
}
.main {
height: calc(100% - 60px);
background-color: #FFFF00;
padding-top: 50px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #000;
color: #9d9d9d;
}
关于css - 指定 div 高度( Bootstrap )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38285473/
26
4
0
我正在我的 java 作业中使用 GUI，并且我必须指定 JCheckBox 中的其他内容。除了这个小要求，其他的我都完成了。我不太确定如何解决这个问题，我查阅了我的书并尝试在线研究 要求: 一系列复
在各种语言中(我将在这里使用 JavaScript，但我已经在 PHP 和 C++ 中以及可能在其他地方看到过它)，似乎有几种构造简单 for 循环的方法。版本 1 如下: var top = doc
有没有一种方法可以使用 CSS 指定每次“小于符号”(在键盘上 M 的右侧)或“大于符号”出现在文本中时，它应该被替换为分别是“小于”或“大于”的实际词？ 最佳答案 CSS 不能作用于(不能修改，即)
首先，使用 setspn 命令为用户注册服务主体名称。 setspn -a CS/dummy@abc.com dummyuser setspn -l dummyuser 给出输出为 CS/dummy@
我在指定从 SFSafariViewController 访问时遇到问题，因为它具有与 Safari 浏览器完全相同的用户代理。 我要做的是仅在 webview 内显示图片，如果在普通浏览器上查看，则
我正在尝试用 R 语言在 lavaan 中指定一个奇怪的模型。该模型如下所示: 我的规范尝试如下所示。我发现难以实现的是将观察到的变量的唯一误差固定为唯一项的两个相关性的总和。 例如，项目 y*1,2
我正在构建 API 以将我的 React 应用程序与我的后端服务连接起来，我想使用 typescript 来指定 data 的类型在我的 Axios 请求中。如何在不修改其他字段的情况下更新 Axio
如何为模型指定初始“软”值？该初始模型是解决类似查询的结果，并且该模型很可能具有正确的部分，甚至对于当前查询可能是正确的。 目前，我正在通过增量求解和 hard/soft constraints 对此
我有来自网页的以下代码 https://cwiki.apache.org/confluence/display/KAFKA/0.8.0+Producer+Example 似乎缺少的是如何配置分区数。我
有没有办法在每个查询的基础上在 Neo4jClient 中指定 Cypher 解析器的版本，如 here 所述? 谢谢! 最佳答案 如果您将 Neo4jClient 更新到最新版本(> 1.0.0.6
我有以下代码生成四个图，但它们最终被压扁(见下图)。我该如何解决这个问题？ par(mfrow=c(2,2)) curve(.5*exp(-.5*x),from=0,to=10,main="f(x)"
我有一个 ColdFusion 10 服务器。我正在使用 JDBC 驱动程序连接到 db2 数据库。我偶然发现了这个笔记。这个设置在哪里？我还查看了 neo*.xml 文件，但没有看到任何 db 驱动
我想知道是否可以指定验证器的运行顺序。 目前，我编写了一个自定义验证器，检查它是否为 [a-zA-Z0-9]+ 以确保登录验证我们的规则，并编写了一个远程验证器以确保登录可用，但目前远程验证器已启动在
我的应用程序需要至少 40MB 的 RAM，因此早期的 iPhone(例如 3G、第一个 iPod touch 版本)就没有它(它们为我的应用程序提供的最大内存约为 20MB)。有没有正确的方法来禁用
我有一个保存日期(不是当前日期)的 Date 对象，我需要以某种方式指定该日期为 UTC，然后将其转换为“欧洲/巴黎”，即 +1 小时。 public static LocalDateTime toL
我想问你在 Varnish 代码中如何在没有缓存的情况下将请求传递到后端。 我知道我可以做到并且正在发挥作用: if (req.url ~ "(\?|&)(something|somethin
我目前基于模块编译程序(如主程序 foo 依赖于模块 bar )如下: gfortran -c bar.f90 gfortran -o foo.exe foo.f90 bar.o 这在 foo.f90
我正在尝试创建一个依赖于另一个 meteor 包的新 meteor 包。当我尝试 meteor add mypackage 时，出现以下错误。为什么 Meteor 不添加 mypackage 并引入它
我正在制作执行器/ react 器，同时发现这是一个终生的问题。它与 async/Future 无关，可以在没有 async 糖的情况下进行复制。 use std::future::Future; s
我在 cassandra 中有一个表，其数据类型为时间戳。我正在使用 cqlsh 从数据库中获取数据，并希望更改我的时间戳列输出的输出格式。我研究了一下，发现我可以通过更改以下文件来更改时间戳输出格式
我是一名优秀的程序员,十分优秀！