gpt4 book ai didi

html - 根据窗口高度改变div高度

转载 作者:太空宇宙 更新时间:2023-11-04 13:19:14 27 4
gpt4 key购买 nike

我的 html 结构如下:-

<body>
<div class="header">header</div>
<div class="content">
hello
</div>
<div class="footer">footer</div>
</body>

它上面应用的样式是:-

<style>
body {
padding: 0px !important;
margin: 0px !important;
}
.header {
height: 30px;
background: gray;
}
.footer {
height: 30px;
background: green;
position: fixed;
bottom: 0px;
width: 100%;
}
.content{
background: yellow;
}


</style>

我想要的是,内容 div 的高度将等于窗口的整个高度,除了页眉和页 footer 分。目前我只看到内容部分有一个黄色的小条,因为其中的文本非常少,页面的其余部分是白色的。我想,content div 会占据那个地方。我尝试使用 height : 100%;在内容 div 中,但它没有用。请帮忙。

最佳答案

尝试修改您的内容类:-

     .content{
background: yellow;
position: fixed;
width: 100%;
top: 30px;
bottom: 30px;
}

顶部和底部为 30px,因为页眉和页脚的高度为 30px。它会为你工作。

关于html - 根据窗口高度改变div高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24192170/

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