gpt4 book ai didi

html - 消除 HTML 中的额外高度

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

SO中有几个类似的问题,但不准确,都不能解决我的问题。

我有一个html页面结构如下

<html><body>
<div class="container" style="height:auto;">
<div class="header" style="height:120px;">...</div>
<div class="context" style="height:360px;">
<div id="area1" style="height:440px; position:relative; top:-20px;"></div>
<div id="area2" style="height:120px; position:relative; top:-140px;"></div>
</div>
<div class="footer" style="height:120px;">...</div>
</div>
</body></html>

基本上,在高度为360px的context中有一个高度为440px的div。因此,div 将分别与 headerfooter 重叠 20px 和 60px。

container 的高度设置为自动,并且使用“inspect element”显示“600px”,body 也是如此。但是 html 的高度为 680px。

我知道额外的 80px 是从哪里来的,但是如何消除它呢?

我有另一个问题,但是在我更新了一个问题之后似乎没有人回答它。 How to design a gradient background of a page with unfixed height .如果那个问题可以解决,也许我可以避免这个问题。

* 更新 *

看来我只是代码太多了,context中其实有两个divarea1area2。高度为 120px 的 area2area1 完全重叠。

最佳答案

您是否意识到 CSS 不正确?

您需要在这些属性之间使用分号:

 style="height:440px position:relative top:-20px"

像这样:

 style="height:440px; position:relative; top:-20px"

关于html - 消除 HTML 中的额外高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8235770/

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