gpt4 book ai didi

html - 为 100% 高度自动调整 div 之间的空间

转载 作者:行者123 更新时间:2023-11-27 23:27:01 26 4
gpt4 key购买 nike

我已经准备了一个移动网站,它具有正确的图片纵横比,但在一些屏幕更大的手机上它太短了,而且在页脚之后出现了白色间隙。我更愿意在内容之间添加一些 DIV,它们会在需要时自动拉伸(stretch)。

我在想这样的事情:

<div id="wrapper">
<div id="header"></div>
<div id="content1"></div>
<div class="empty_gap"></div>
<div id="accordion"></div>
<div class="empty_gap"></div>
<div id="footer"></div>
</div>

.empty_gap DIV 的高度会均匀,因此页面会适合屏幕高度。如何完成这项工作?或者对于这种页面短满整个手机屏幕的情况,你们有什么其他的解决方案吗?

编辑: 我必须添加一件事,之前我没有想到它会导致问题。这些解决方案都不适合我,因为我使用 jquery Accordion ,当我执行 $("#wrapper").outerHeight(); 时,即使我已折叠所有面板。我想这也是那些解决方案对柔性盒子不起作用的原因。

EDIT2:JS 解决方案现在有效,我只需要从包装器中减去面板的内容。

最佳答案

如果您对 JavaScript 解决方案没问题,试试这个:

通常您的 div 应该用 div 容器包裹。如果不是这样,那么继续添加一个这样的:

<div id="wrapper">
<div id="header"></div>
<div id="content1"></div>
<div class="empty_gap"></div>
<div id="content2"></div>
<div class="empty_gap"></div>
<div id="footer"></div>
</div>

然后在 JavaScript 中,计算此容器 div 的高度并将其从窗口的高度中减去。那将是所有间隙的总和,除以间隙数(在您的示例中为 2)以获得每个间隙的高度。像这样:

var totalGap = $(window).height() - $("#wrapper").outerHeight();
var gap = totalGap / 2; //2 is the number of your gaps
$(".empty_gap").css("height", gap);

将此代码放在页面完成加载的事件中。但是,如果您的应用支持旋转,则您必须将此代码放在 $(window).resize() 事件中。

关于html - 为 100% 高度自动调整 div 之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37948129/

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