个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
25
4
我需要的是一个基于像素的高度包含 3 行的 div。顶行的高度取决于内容。底行具有固定高度。中间一行填充所有剩余空间。一切都是宽度 100%。
数小时以来，我一直在努力构建一个 div 和基于 CSS 的布局，这实际上需要 秒 使用表格来完成。我已经尝试了很多方法，包括负底边距、嵌套 div、各种定位、高度设置、显示:表格，没有什么能满足我的需要。我搜索了这个网站和互联网，刷新了我对液体布局的各种方法的内存。没有用。
我并不特别担心与 IE6 等“旧”浏览器的兼容性(此应用程序不供“公共(public)”使用)。只要让它在 IE8+FF+Chrome 中工作就很棒。
我已将问题剥离到下面发布的一个简单示例，以及显示我想要的基于表格的布局。旁注:我喜欢 CSS 和无表格布局，但是，有时我们为了让它工作而必须经历的时间似乎很荒谬。
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.container {width:500px;height:200px;border:1px solid black;background-color:#c0c0c0;position:relative;}
/* Styles for colors */
#top td, .top {width:100%;background-color:pink;}
#mid td, .mid {width:100%;background-color:lightgreen;border:1px solid red;}
#bot td, .bot {width:100%;background-color:lightblue;}
/* Styles for Table-based Layout */
#layout {width:100%;height:100%;border-collapse:collapse;}
#layout td {vertical-align:top;padding:0px;}
#top td {}
#mid td {height:100%;}
#bot td {height:2em;}
/* Styles for Table-less Layout */
.top {}
.mid {}
.bot {height:2em;position:absolute;bottom:0px;}
</style>
</head>
<body>
Layout I want (with tables):
<div class="container">
<table id="layout">
<tr id="top"><td>Top:<br/>Content-based<br/>Height</td></tr>
<tr id="mid"><td>Middle:<br/>Fill remaining space</td></tr>
<tr id="bot"><td>Bottom: Fixed Height</td></tr>
</table>
</div>
<hr/>
Best I can get with CSS:
<div class="container">
<div class="top">Top:<br/>Content-based<br/>Height</div>
<div class="mid">Middle:<br/>Fill remaining space</div>
<div class="bot">Bottom: Fixed Height</div>
</div>
</body>
</html>
与此同时，我不能让这阻止我的进步，已经花了太多时间。我将继续我元素中的表格布局。它很简单，完全满足要求，即使纯粹主义者在某处哀嚎。
尽管如此，还是要感谢您的任何建议 - 我主要好奇此时“正确”的解决方案是什么，我讨厌被难倒。当然，这是可行的？
最佳答案
您的问题的关键是以不同的方式看待问题——如果您使用 Google“粘性页脚”，您会找到如下解决方案:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.container {width:500px;height:200px;border:1px solid black;background-color:#c0c0c0;position:relative;}
.notbottom2 {
min-height: 100%; background-color:lightgreen; width: 100%;
height: auto !important;
height: 100%;
}
.mid2 {padding-bottom: 2em;}
.top2 { width: 100%; background-color: pink;}
.bottom2 { height: 2em; width: 100%; margin-top: -2em; background-color: lightblue; }
</style>
</head>
<body>
<div class="container">
<div class="notbottom2">
<div class="top2">Top:<br/>Content-based<br/>Height</div>
<div class="mid2">Middle:<br/>Fill remaining space</div>
</div>
<div class="bottom2">Bottom: Fixed Height</div>
</div>
</body>
</html>
编辑:在那里，这应该是你想要的，或多或少。
关于css - 三行无表格 CSS 布局，中间行填充剩余空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1703455/
25
4
0
运行 Tomcat 失败并出现 java.lang.OutOfMemoryError - 与缺少 PermGen 空间相关的错误。 我最近将 Tomcat 更改为以自己的用户(而非 root)运行。
我们有一个表，其中包含数百万行，其中包含 PostGIS 几何图形。我们要执行的查询是:落在边界几何内的最新条目是什么？这个查询的问题是我们经常会有大量的项目匹配边界框(半径大约为 5 公里)，然后
我有一个Elasticsearch设置，它将允许用户搜索通配符作为索引。 array:3 [ "index" => "users" "type" => "user" "body" => arra
我创建了一个表，其中每行包含两个按钮，并且两个按钮连接在一起，我想将两个按钮分开。我用过 不起作用，css 也是，这是他们的另一种方式。 我有另一个问题，因为我不想在表格边框内显示操作按钮，而是在靠近
我试图在 jQuery Mobile 中的两个按钮之间留出空白。现实中的布局是这样的: Button 1 Button 2 (Hidden w/ display: none)
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
您好，我对图表应用程序还很陌生。现在我为我的应用程序创建了条形图。当我运行 create bar chart as separate project 时，输出如下所示。 然后当我将条形图与我的应用程序
我在使用 H2 和 GeoDB(内存中，junit)时遇到问题。 另外，使用 Hibernate 5(每个包的最新版本，包括 hibernate-spatial)和 Spring 4。 通过 id 实
我想画一张澳大利亚的 map ，并将每个城市表示为一个点。 然后突出显示人口众多(> 1M)的城市 library(sp) library(maps) data(canada.cities) head
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题？更新问题，以便 editing this post 提供事实和引用来回答它. 6年前关闭。 Improve this
如何保持.txt文件中存在的空格？在.txt文件中，它表示： text :text text1 :text1 text23 :text2 text345 :text3 如果我写这段
以下哪个键最大？ 选项 1:16 个数字 [0,9] 选项 2:30 个元音 选项 3:字母表中的 16 个字母 选项 4:32 位 有人可以帮助我，告诉我哪一个是正确的答案以及我们如何计算它吗？我知
在 Unity 3d 中使用 Azure 空间 anchor 来实现在 iOS 和 Android 上部署的室内和室外增强现实体验是否有益？ 最佳答案 是的，对于 Azure Spatial Anch
我有一个绝对定位的圆形图像。图像只需占据屏幕宽度的 17%，并且距离顶部 5 个像素。 问题是，当我调整图像大小以占据屏幕宽度的 17% 时，它会这样做，但同时容器会变长。图像本身不会拉伸(stret
我在 Ubuntu 14.04 上使用 Cassandra。从文档中，我可以看到运行命令: nodetool snapshot 创建我的 key 空间的快照。 命令的输出是: nodetool sn
Heroku引入了“私有(private)空间”，是否可以将现有应用迁移到私有(private)空间？ https://blog.heroku.com/archives/2015/9/10/herok
是否允许在语义记录中使用非绑定(bind)空格 或其他 HTML 编码字符？我遇到的问题是 ; 字符被软件视为记录的结尾。 例如:假设我有一份婚姻记录，其中包含 2 个结婚者的姓氏、结婚年份以及结
我正在研究“智能 parking ”项目，偶然发现了包含我们真正需要的YouTube视频。我们已经实现了第一部分，即从视频源进行实时透视变换，下一步是将其定义为一组矩形 我基本上需要知道他是如何做到的
我有两个类:Engine 和 Trainset(多个单元)，这两个类共享其 ID 空间，其中包含名称和系列 id=- . 这是我的Engine类(它是抽象的，因为有引擎的子类型(DieselEngin
如果有人能帮助我，那就太好了。 我正在尝试使用Java的Split命令，使用空格分割字符串，但问题是，字符串可能没有空格，这意味着它将只是一个简单的顺序(而不是“输入2”将是“退出”) Scanner
我是一名优秀的程序员,十分优秀！