Html 在iPad或iPhone中，页脚div不能以纵向模式显示_Html_Css

Html 在iPad或iPhone中，页脚div不能以纵向模式显示

html css

Html 在iPad或iPhone中，页脚div不能以纵向模式显示,html,css,Html,Css,我需要“内容页脚”div修复。如果我在横向模式下以I-phone或I-pad显示我的页面，它工作正常，但在纵向模式下“Content footer”div不显示。您只需在“谷歌Chrome设备模式”中检查我的代码，然后选择“纵向模式”和“横向模式”。我附上了两张截图。 “内容页脚”div以横向模式显示。纵向模式下不显示“内容页脚”div。 Html代码出于某种原因（我不知道为什么…），当.Header wrapper和.Content wrapper比视口宽时（例如，比1024px宽，i

我需要“内容页脚”div修复。如果我在横向模式下以I-phone或I-pad显示我的页面，它工作正常，但在纵向模式下“Content footer”div不显示。您只需在“谷歌Chrome设备模式”中检查我的代码，然后选择“纵向模式”和“横向模式”。我附上了两张截图。 “内容页脚”div以横向模式显示。

纵向模式下不显示“内容页脚”div。

Html代码

出于某种原因（我不知道为什么…），当

.Header wrapper

和

.Content wrapper

比视口宽时（例如，比1024px宽，iPad横向），页脚会被推到视图之外

例如，试着给

.Header wrapper

和

.Content wrapper

一个100%的宽度。有效

您确定使用的代码与问题中的代码相同吗？我在肖像画/风景画方面没有问题。感谢快速回复，但不要在任何在线编辑器中显示此代码。只需创建一个html页面，然后在Chrome设计模式下查看它。此代码在JSFIDLE或任何其他编辑器中完成工作。但不能在html页面中工作。@Pimskie，请将其作为答案发布。很好的发现..标题包装和.内容包装的宽度为100%工作正常。谢谢。谢谢帮助。但在我的项目中，宽度必须使用“px”而不是“%”。请为我提供其他解决方案。将其设置为所需像素，并使用媒体查询确保它们不高于视口宽度。

    <body>
    <header>
        <div class="Header-wrapper">
            <h3>Header data</h3>
        </div>
    </header>
    <content>
        <div class="Content-Wrapper">
            <div style="Content-Data">
                <h3>Content Data</h3>
</div>
        </div>
        <div class="Content-footer">
            <h3>Content Data Footer Fixed</h3>
</div>
    </content>
    <footer></footer>
</body>

.Header-wrapper
{
  width:1200px; 
  background-color:#ffb3b3;
}
.Content-Wrapper
{
  border:1px solid black;
  width:1200px;
  position:relative;
  min-height:600px;
  height:auto;
}
.Content-Data
{
  min-height:600px;
  height:auto;
  margin-top:10px;
  margin-bottom:20px;
}
.Content-footer
{
  bottom:0;
  background-color:orange; 
  position:fixed;
  width:1200px;
}