gpt4 book ai didi

html - 在没有 JavaScript 和绝对定位的情况下让 DIV 填充页面的其余部分?

转载 作者:行者123 更新时间:2023-11-28 01:57:40 25 4
gpt4 key购买 nike

是否可以在没有 JavaScript 和绝对定位的情况下让这个 DIV 填充页面的其余部分?

<html>
<head>
<title>Hello World</title>
<style>
body { margin: 0; }
#title_image { float: left; margin: 1em; }
#title { float: left; margin: 1em; }
#content { background-color: #808277; clear: both; color: #FEFDDE; }
</style>
</head>

<body>
<img id="title_image" src="helloworld_small.jpg" />
<div id="title">
<h1>Hello World</h1>
<h3>Home of the Hello World site!</h3>
</div>
<div id="content">
Hello World
</div>
</body>
</html>

当我将 height 设置为 100% 时,它比视口(viewport)高了一点。我猜这并不令人惊讶,因为它填充了 100% 加上它上面内容的高度。当我将 position 设置为 relative 并将 bottom 设置为 0 时,它只是内容的高度。我猜这也不足为奇,因为我认为 bottom 仅用于 absolute 定位。当我将 header 内容包装在 div 中并将其 height 设置为 20% 然后设置 content div 的 height80% 它最终呈现很像只是设置 content div 的 height 80%

最佳答案

我冒昧地创建了一个 JSFiddle,我认为你的意思是什么,我也将它 html5 起来了。这很近吗?

JSFiddle

* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
hgroup {
padding:2% 1em;
background:#0f0;
height:20%;
display:block;
}
article {
background-color:#808277;
color:#FEFDDE;
height:72%;
padding:2% 1em;
display:block;
}

关于html - 在没有 JavaScript 和绝对定位的情况下让 DIV 填充页面的其余部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16027703/

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