gpt4 book ai didi

css - 如何创建一个填充垂直可用空间而不与包含的 div 重叠的 div?

转载 作者:行者123 更新时间:2023-11-28 15:45:00 25 4
gpt4 key购买 nike

我正在处理一个带有容器 (div) 的布局,容器内有两个元素,一个用于标题的 div,另一个用于内容的 div。标题 div 具有固定高度,内容 div 必须填充可用空间。容器 div 有自己的样式,不能重叠。我的目标是创建简单的基于 div 的元素以在网页上放置简单的小部件。

我检查了其他类似的问题,例如:

但是这些解决方案都不适用于我。

我设法得到了这个 html/css:

<?xml version="1.0"?>
<html>
<head>
<style type="text/css">
.workbench {
width: 100%;
height: 100%;
background: white;
}
.widget {
width: 100px;
height: 500px;
position: absolute;
top: 50px;
left: 50px;
border: solid 1px black;
margin: 2px;
}
.widget-header {
height: 50px;
border: solid 1px red;
margin: 2px;
}
.widget-body {
position: absolute;
top: 50px;
bottom: 0px;
left: 0px;
right: 0px;
border: solid 1px blue;
overflow: hidden;
margin: 2px;
}
</style>
</head>
<body>
<div id="workbench" class="workbench">
<div id="widget" class="widget">
<div id="widget-header" class="widget-header">
Header
</div>
<div id="widget-body" class="widget-body">
Body
</div>
</div>
</div>
</body>
</html>

这在 FireFox 和 Chrome 上工作得很好,但在 Internet Explorer 8 上不起作用:

Page result

你能帮帮我吗?

最佳答案

意识到您的目标不是 IE5.5/IE6 市场,并且根据您的描述(在 jsFiddle 上呈现良好,而不是来自文件),问题似乎源于缺少 doctype declaration .

为了正确呈现文档,您必须指定文档类型,以防止浏览器陷入怪癖模式。您的文档似乎符合有效的 XHTML 约定,因此您可以使用 XHTML 过渡文档类型来指示 IE8 在标准模式下呈现,或者使用 HTML5 文档类型(以及 HTML5 shim/shiv ,如果您将使用 HTML5 的语义作为好吧)。

为了方便起见,XHTML 过渡文档类型声明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

注意:Modernizr包含自己的 HTML5 shiv,建议无论如何简化开发。

这是 jsFiddle给你乱搞

关于css - 如何创建一个填充垂直可用空间而不与包含的 div 重叠的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10787387/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com