一个div接管另一个div空间

时间:2019-12-27 07:09:05

标签: html css

情况:因此,我的网站分为以下几部分:首先,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>

请帮助,谢谢。

2 个答案:

答案 0 :(得分:0)

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的一个排列在另一个下方!

答案 1 :(得分:0)

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

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

编辑 根据我的评论。

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

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