<分区>
<分区>
我一直在为网页设计布局,即使我在一个极简示例中运行它,它在传输到我的网站模板时仍拒绝工作。
起初我认为一些 CSS 规则或其他会干扰,但我将范围缩小到文档类型:
如果我在 chrome 中运行以下示例,一切正常。但是一旦我添加了一个文档类型(无论是 html、xhtml、strict、transitional 还是 loose),它就搞砸了。我的“搞砸了”是指 css 指令“高度:100%;”对于 ID 为“container”的 div 完全忽略。
谁能告诉我问题出在哪里?
<html>
<head>
<style>
body
{
margin:0px;
padding: 0px;
}
#container
{
display: table;
position: relative;
border: 1px dashed black;
height: 100%;
width: 100%;
}
#header
{
position:absolute;
top: 0px;
left: 0px;
width: 90%;
height: 100px;
border: 1px solid red;
}
#main
{
display: table-cell;
vertical-align: middle;
width: 100%;
border: 1px solid green;
}
#inner
{
position:relative;
margin-top: 100px;
width: 90%;
height: 300px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="main">
<div id="inner">
inner
</div>
</div>
</div>
</body>
</html>
最佳答案
我将在 CSS 中设置以下内容:
html {
height: 100%;
}
因为 height
继承自其父元素。
关于HTML-Doctype 杀死 css 声明 "height: 100%;",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17952345/