个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在建立一个具有3个div的页面布局:一个具有固定高度(以像素为单位)的页眉和页脚，以及一个位于页面中间的内容div，应填充剩余的屏幕高度。此外，我希望能够在内部内容div中将高度设置为100％，因为其中一个将承载一种需要填充其余屏幕高度的绘图区域。因此，内部div不要在页眉或页脚下泄漏特别重要。到目前为止，我实现了100％有效的CSS解决方案，该解决方案可以在除Internet Explorer 6和7之外的所有主要浏览器中使用。
我可以做些什么来修复IE6和7的布局吗？或者，您是否看到另一种做我想要的方式？
这是代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The #content div fill the remaining height and appears to have a height</title>
<style TYPE="text/css">
<!--
* {
margin: 0;
padding: 0;
}
html, body,
#container{
height: 100%;
}
#container{
position: relative;
}
#header,
#footer{
height: 60px;
line-height: 60px;
background: #ccc;
text-align: center;
width : 100%;
position: absolute;
}
#header{
top: 0;
}
#footer{
bottom: 0;
}
#content{
position: absolute;
top:60px;
bottom: 60px;
width : 100%;
overflow: auto;
border-top: 1px solid #888;
border-bottom: 1px solid #888;
}
#inner-content{
overflow: auto;
background-color: #FC0;
height: 100%;
}
p{
margin-bottom: 10px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<div id='inner-content'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel
quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie.
Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel
quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie.
Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel
quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie.
Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel
quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie.
Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel
quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie.
Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit.
</p>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
最佳答案
我最终使用Javascript实现了同样的事情
关于css - 用CSS填充剩余的屏幕高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4954997/
25
4
0
我正在运行一个带有 while 约束的 SQL 查询，其中包含一些“id”。例如: SELECT table.id FROM TableOne table WHERE table.id IN (1,
我正在寻找在替换其中一个元素后打印元素列表的最正确方法。我可以按如下方式做，但显然很困惑。 #!/usr/bin/python import sys file = open(sys.argv[1])
这个问题在这里已经有了答案: How wide is the default `` margin? (4 个答案) How do I remove the top margin in a web
当我尝试使用命令安装 rvm 时::(I am Using UBUNTU 12.04 LTS) curl -L https://get.rvm.io | bash -s 当我尝试与简单用户相同的命令时
我使用 GOPro 工作人员 6 个月前发送给我的命令，通过终端(在 Gopro 网络上)使用 Gopro Hero3 拍摄照片/视频。有效。但是，在过去的一个月里，我一直在尝试再次执行此操作，并且不
尽管知道我不应该关闭应用程序按钮，但我仍然这样做。完成所有 Activity 后，我调用 finish() 方法，它们调用析构函数和所有内容。用户的行为也是正确的。但我想知道为什么还有 5 个打开的线
当我在 Rest Controller 中的类级别启用 @Validated spring 注释时，会生成 2 个验证上下文(每个验证上下文都有不同的前缀)。 @Validated 注释是必需的，因为
在旧的 API 中，剩余的允许容量显然作为 X-Ratelimit-Remaining 返回HTTP header 。 然而，current version's documentation对此一无所获
我一直在使用 Service Fabric 一段时间，成功构建、部署和测试了多个服务，但我刚刚完成构建的服务在部署时失败(请参阅下面的错误)。在诊断中，我尝试使用 VS 模板(没有代码更改)创建和部署
这个问题在这里已经有了答案: 关闭 12 年前。 Possible Duplicate: Progress unit in ProgressDialog 如何覆盖进度条进度消息，即 61/100 到
我正在用 Objective-C (Cocoa) 编写命令行实用程序的前端。我需要解析输出以检查不同类型的消息。有两种基本类型；信息消息和下载状态消息。信息消息始终以以下内容之一开头:INFO:、WA
我是一名优秀的程序员,十分优秀！