gpt4 book ai didi

html - 灵活的布局以覆盖页面的其余部分并将高度分成两半供 child 使用

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

这是一个示例布局:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Dynamic DIV</title>
<style>
#header {
background: green;
}
#header * {
vertical-align: middle;
}
button {
float: right;
}
#top {
background: yellow;
}
#bottom {
background: aqua;
}
</style>
</head>

<body>
<div id="header">
<label for="checker">Check</label>
<input type="checkbox" id="checker">
<label for="slider">Slider</label>
<input type="range" id="slider"><span>Some text</span>
<button type="button">Bar</button>
<button type="button">Foo</button>
</div>
<div id="content">
<div id="top">Top content</div>
<div id="bottom">Bottom content</div>
</div>
</body>

</html>


演示:http://jsfiddle.net/CZt36/1/

如何将 content DIV 扩展到页面的其余部分,以便 topbottom DIV 获得 50% 的 content DIV 高度?

注意:我不想支持旧浏览器或使用一些类似帖子中提到的 JavaScript。

最佳答案

height:100% 表示填充父元素的所有高度。在您的情况下,内容的父元素是 body,因此您需要先将其设置为 100%;然后是 100% 的专利,即 html。然后给标题一些高度,比如 10%,让内容休息,这样它就可以占据 body 的所有其余部分,然后 50% 给内容的子元素。附上更新的 fiddle

将此添加到您的 CSS 中

   #header
{
background:green;
height:10%
}

html,body
{
height:100%;
margin:0px;
}

#content
{
height:90%;
}
#top,#bottom
{
height:50%
}

JSFiddle:http://jsfiddle.net/CZt36/5/

关于html - 灵活的布局以覆盖页面的其余部分并将高度分成两半供 child 使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21807585/

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