一个div接管另一个div空间

Question

情况：因此，我的网站分为以下几部分：首先，div内的主体只是一个主要容器，然后在该主容器内，首先有3个div元素；其次是标题；第二个是主体或内容第三是页脚。

问题：在某些浏览器上，或更具体地说，在Iphone手机或ios上的任何浏览器上。我的页脚显示在主体div（内容部分）的中间，但在其他任何android手机上，它的显示效果都很好，或者在正常的浏览器上显示。.

屏幕截图： （正常）在任何Android设备上：- screenshot on any android phone

（问题）在任何IOS设备上：- screenshot on any ios phone

shared.css文件，其中包含这些页面的所有CSS：- https://github.com/11abuyaman/majed/blob/master/CODE/CSS/shared.css

出现问题的页面的链接：- https://11abuyaman.github.io/majed/CODE/HTML/About%20us.html

更新： 我只在#clouds_body上使用flex，这样我就可以在页眉和页脚之间正确地放置主体，并且即使主体没有占用足够的空间，我也希望页脚卡在底部。 em>

请帮助，谢谢。

Answer 1

html代码：

 <div id="container">
        <div id="header">header</div>
        <div id="body">body</div>
        <div id="footer">footer</div>
    </div>

css代码：

#container{
    margin-left:auto;
    margin-right:auto;
    height:auto; 
    width:auto;
}

这将起作用！这样会将div的一个排列在另一个下方！

Answer 2

这是一个Safari问题，您可以通过删除display: flex上的#clouds_body来解决。如果您不使用flex-direction: row，则无论如何都不能在其上使用flex。

在Mac Firefox上观看页面时，我也删除了flex，但没有任何改变。

编辑 根据我的评论。

将height: 100%中的min-height: 100vh更改为#clouds_body。

但是，这将解决Safari与页面相关的其他问题，但这超出了您的原始问题。