个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我有一个在怪癖模式下看起来不错的网站:
现在，我想通过添加 <!DOCTYPE html> 更改为严格模式.我尝试了很多东西，但没有得到相同的行为。内容不再被拉伸(stretch)。
我把代码放在这个 fiddle 里了:http://jsfiddle.net/5e1yvLxj/
在 fiddle 中，严格模式被激活。
index.html
<html lang="en">
<head>
<link href="main.css" rel="stylesheet"/>
</head>
<body>
<div id="nav">
</div>
<div id="messages">
<div id="chat-box">
</div>
</div>
<div id="footer">
</div>
</body>
主.css
html {
min-height: 100%;
position: relative;
}
body {
background-color: #004269;
margin-top: 112px; /* nav */
margin-bottom: 190px; /* footer */
}
#nav {
height: 100px;
position: absolute;
top: 0;
width: 100%;
background-color: #227733;
}
#messages {
position: relative;
margin: 0;
position: relative;
min-height: 200px;
padding: 10px;
background-color: white;
padding: 15px; }
#chat-box {
position: relative;
min-height: inherit;
padding-top: 0px;
height: 100%;
}
#footer {
padding-top: 20px;
background-color: #227733;
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
}
最佳答案
只需使用其中一种粘性页脚技术:
document.getElementById("messages").onclick = function() {
var p = document.createElement("p");
p.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
this.appendChild(p);
}html, body {
margin: 0;
height: 100%;
}
#nav {
height: 100px;
background-color: #227733;
position: relative; /* force higher z-index than next divs */
}
#footer {
height: 150px;
background-color: #227733;
}
#messages {
min-height: 100%;
margin-top: -100px; /* match header height */
margin-bottom: -150px; /* match footer height */
background-color: #EEEEEE;
}
#messages:before {
content: "";
display: block;
height: 100px; /* match header height */
}
#messages:after {
content: "";
display: block;
height: 150px; /* match footer height */
}<div id="nav">#nav</div>
<div id="messages">#messages (click to add content)</div>
<div id="footer">#footer</div>关于html - 严格模式下 100% 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27868156/
24
4
0
最近我遇到了 AngularJS Strict DI 模式。使用它的目的和好处是什么？通过在移动设备上使用它，我们会获得显着的性能提升吗？ 我尝试将它应用到我的代码中，并且在编写代码时我没有做任何注释
要在复制文本的底部添加额外信息 - 我想使用以下 JS: document.addEventListener('copy', (event) => { const pagelin
Java 是否有一个好的、严格 的日期解析器？我可以访问 Joda-Time，但我还没有看到这个选项。我发现了“Is there a good date parser for Java”这个问题，虽然
在下面的网页中，图像和 div 之间有几个像素的间隙。 (我已经在 Firefox 3 和 Safari 4 中测试过。) 我怎样才能缩小差距？ body { background-color:
前段时间我遇到了一个“问题”，但我一直没有弄清楚。希望有人能照亮它。当我将 DOCTYPE 从严格更改为过渡时，是什么导致某些浏览器(Chrome、Opera 和 Safari)以不同方式呈现页面。我
PHP 以其类型杂耍而闻名。我必须承认这让我很困惑，而且我很难在比较中找出基本的逻辑/基本内容。 例如:如果 $a > $b 为真且 $b > $c 为真，是否意味着 $a > $c总是也是真的吗？
有在ECMAScript Language Specification11.9.1 等于运算符 (==): NOTE 3 The equality operator is not always tra
考虑这些不同的尝试，比如 last : Prelude> import Data.Foldable Prelude Data.Foldable> foldr const undefined (reve
我正在考虑使用 jQuery 元数据插件。看起来很有趣，但是... ... alert($('li.someclass').metadata().some); 这段代码有效吗？ 更新 当然这是一个老例
我有一个 CSS 文件，我的本地开发服务器(webpack)正在提供一个显然错误的 mime 类型。 Refused to apply style from 'http://localhost:100
因此对于 Google Chrome 和 Opera，cookie 具有 SameSite 属性，该属性可以具有以下两个值之一:strict 或 lax。 它们之间的一些区别之一是 SameSite=
我试图到处寻找这个问题的答案，但似乎我运气不好。 我有一个非常简单的 Mongoose 模型 var userObject = { profile: { username: {
我正在为必须使用 XHTML 1.0 Strict 进行验证的类编写程序。根据 w3 的验证程序，我的页面通过了验证。我还有一个 HTML5 版本(这是原始版本)，它可以按应有的方式进行验证和工作。
我得到了很多 validation errors因为 在 里面。如果我删除 br 标签，那么它工作正常。 为什么会产生问题？ 最佳答案 不是br在p里面，而是你没有结束 br与 /特点。你有 在代码中
好吧，这让我抓狂。 我想在我的文档周围加上边框。它应该很好地绕过整个窗口/视口(viewport)。所以我定义: body { border: 1px solid red; } 当我的文档处于 q
我在 MySql 服务器上运行的查询遇到问题。这是查询: SELECT itms.Gender,itms.Age, (CASE WHEN (plv.Discount = 0 OR t1.EverGre
我有以下 javascript 函数，如果所有必填字段都不完整并且是我使用 Google Apps 脚本创建的表单的一部分，它会阻止表单提交。请注意，#submitbutton 实际上是一个常规按钮，
我是一名优秀的程序员,十分优秀！