情况:因此,我的网站分为以下几部分:首先,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>
请帮助,谢谢。
答案 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与页面相关的其他问题,但这超出了您的原始问题。