gpt4 book ai didi

html - 当高度设置为 100% 时 Div 缩放到内容

转载 作者:太空宇宙 更新时间:2023-11-03 18:48:55 25 4
gpt4 key购买 nike

我有三个嵌套的 div,内部的具有固定高度,中间的用于填充外部的,外部的用于容纳固定在底部的页脚。但是中间的 div 似乎只和内部的一样高,这是我不想要的。

我将问题简化为以下内容,我认为这是一个最小的示例。我不想更改外部或内部 div 的高度属性,因为这会干扰布局的其余部分。有没有办法通过改变中间 div 的属性来做我想做的事?

这是 html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>
<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
</div>
</body>
</html>

还有 CSS:

html{height:100%;}
body{height:100%;}
#outer{height: auto; min-height: 100%;}
#middle{height: 100%;}
#inner{height:500px;}

您可以检查 #middle div 的高度是否为 500,而我希望它填充 #outer div。

我是 CSS 的新手,几乎所有代码都是从不同的教程和/或反复试验中复制的。所以,如果我做的事情明显错误/愚蠢,请原谅。

编辑:我不明白为什么,但似乎删除 doctype 声明会使问题消失。因此,我更改了代码示例以包含声明。

最佳答案

您的错误是将“body”和“html”类设置为 height: 100%(什么都不做)。相反,我将你的外部 div 设置为 100% 高度。

<html>
<head>
<style type="text/css">
div {border:2px solid black;}
div div {border-color: blue;}
div div div {border-color: red;}
#outer{height: 100%; min-height: 100%;}
#middle{height: 100%;}
#inner{height:500px;}
</style>
</head>

<body>
<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
</div>
</body>
</html>

如果您不知道如何混合使用页脚,我也给了您一个示例:

<html>
<head>
<style type="text/css">
div {border:2px solid black;}
div div {border-color: blue;}
div div div {border-color: red;}
#outer{height: 100%; min-height: 100%; position: relative;}
#middle{height: 100%;}
#inner{height:500px;}
#footer{height:100px;width:100%;position:absolute;bottom:0;}
</style>
</head>

<body>
<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>

关于html - 当高度设置为 100% 时 Div 缩放到内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15531097/

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