个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
26
4
我有一个响应式布局，它在 FireFox、Chrome 和 Opera 中完美运行，但在 IE 中却不行。它在这 3 个现代浏览器中垂直和水平延伸，但在 IE 中没有。它基于 display:table css 技术。
这是我的代码:
<div id="container">
<div id="header"> header header header header header </div>
<div id="contentWraper">
<div id="content">
<div id="columnsWraper">
<div id="leftPanel">left panel <br /> left panel <br /> left</div>
<div id="rightPanel">right panel</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
CSS:
html, body { height: 100%; background: gray; margin: 0; padding: 0; }
#container { display: table; height: 100%; width: 100%;}
#header { height: 0%; display: table-row;}
#contentWraper {height: 100%; background: lightgray; display: table-row;}
#content {height: 100%; background: lightgray; display: table; width: 100%;}
#columnsWraper {height: 100%; display: table-row;}
#footer { height: 0%; display: table-row;}
#leftPanel { background: wheat; width: 100px; display: table-cell; }
#rightPanel { background:yellowgreen; display: table-cell; }
在我使用带有“display:table”样式的嵌套 div 之前，它也适用于 IE。我不得不使用它，否则“header”只有 100px 宽(“leftPanel”的宽度)。只有在 IE 中“leftPanel”和“rightPanel”不填充 100% 高度。有没有办法在 IE 中修复它？有谁知道如何更改我的代码以在 IE 中工作。我尽量避免使用 javaScript。
最佳答案
不使用“表格样式”并在 IE 上工作:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<div id="header"> header header header header header </div>
<div id="contentWraper">
<div id="content">
<div id="columnsWraper">
<div id="leftPanel">left panel <br /> left panel <br /> left</div>
<div id="rightPanel">right panel</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
CSS:
html,body {
background:gray;
margin:0;
padding:0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#container {
height:100%;
position:absolute;
width:100%;
}
#header {
background:#FF1493;
top:0;
}
#footer {
background:#87CEEB;
bottom:0;
}
#header, #footer {
position:absolute;
width: 100%;
height: 1.5em;
}
#contentWraper {
position: absolute;
background: black;
width: 100%;
top: 1.5em;
bottom: 1.5em;
}
#content {
background:lightgray;
height:100%;
width:100%;
}
#leftPanel {
vertical-align: top;
background:#F5DEB3;
width:100px;
display: inline-block;
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
bottom: 0;
}
#rightPanel {
background:#9ACD32;
display: inline-block;
height: 100%;
left: 100px;
right: 0;
position: absolute;
}
关于html - 显示 :table style are not strech to 100% height in IE 的嵌套 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11213870/
26
4
0
这个问题在这里已经有了答案: How can I vertically align elements in a div? (28 个答案) Vertical Aligned Text and Im
我想做一个像 view0.height = view1.height + view2.height 这样的约束。当 view1.height 或 view2.height 改变时，view0.heig
有人可以解释为什么这个标记: 呈现大约 2x18 的 float div(在 Chrome/Firefox 中)而不是 2x2 div？ 即使所有空格都被删除，图像似乎也遵循 font-
我的 HTML 页面上有一些可拉伸(stretch)的元素。 使用这个 CSS .stretchable-element { height: 25%; } 随着浏览器窗口高度的增加，可伸缩元素
我在“developer.android.com”上查看以缩小我的位图文件，但我发现了一件事我不明白。所以我很感激你能给我一点帮助。 这是一个 snippet来自 developer.android.
假设我们有以下设置: .container { background-color: red; width: 500px; min-height: 300px; } .child { b
我遇到了高度错误的问题 $(window).height(); 也有类似的问题 here 就我而言，当我尝试时 $(document).height(); 它似乎返回了正确的结果 窗口高度返回320
我正在尝试使用 javaFX (2.2) 开发桌面应用程序，但我遇到了一些困难，无法真正让它按照我希望的方式运行。作为该框架的新用户，我可能没有按应有的方式使用它... 我想要的是一种仪表板，在 Sc
就这么简单:) 我右边的列动态变化，由于左列的高度设置为 100%，我认为根据 Right_Column 的高度动态修改容器的高度会很好。有小费吗？谢谢:) 最佳答案 如果我正确理解了问题，你可以做这
我有一个 ScrollView(包含 NSTextEditor)，其顶部、左侧和右侧约束相对于其容器(主窗口)正确设置为 0。 我无法使其高度为主容器的一半。有什么帮助吗？ 最佳答案 如果我理解正确，
这个问题之前曾被问过(Infinite Scroll on Mobile browsers)，但没有得到回应。 我正在尝试实现无限滚动。 检查文档是否在底部，导致更多加载的函数是: if ($(win
这个问题在这里已经有了答案: height:100% VS min-height:100% (4 个答案) 关闭 6 年前。
我在尝试解决这个问题时遇到了一些问题。我已经编写了一个 jquery 函数来检测用户何时点击页面底部并触发一个函数。现在，虽然这适用于最常见的屏幕尺寸，但当用户的屏幕太大以至于可以一次看到整个页面时，
如何获得与导航高度(填充)相同的导航高度 ...!？ nav { width: 100%; } nav ul { text-align: center; background-
所以，实际上我可能完全想多了，应该放弃最小高度，但我目前有以下 HTML:
我正在阅读 Bootsrap3 文档。我发现这段页脚代码粘在屏幕底部。 html, body { height: 100%; } #wrap { min-height: 100%; height: a
我对容器 div 的高度有疑问。我想 它是 body 的 100%，但不起作用。我添加了 css body height=100% var d = document; $(d).ready(funct
我有一个三部分布局:页眉、内容和页脚。我非常熟悉绝对定位技术；当我希望内容 div 扩展到可用高度的 100% 时，我经常使用它。 在这种情况下，我的问题是我事先不知道页脚的高度，它是根据自己的内容动
在下面的代码中，我尝试实现无限滚动。我遇到的问题是“document.height”和“window.height”返回相同的值。有人可以帮我解决我哪里出错了吗？
我有一个页面布局，其中两个 div 在一行中彼此相邻对齐。一列包含可变长度的文本，第二列包含图像。 标记基本上如下: texttext 我的
我是一名优秀的程序员,十分优秀！