Question

我要求“Content-footer”div固定。如果我在i-phone或i-pad中以横向模式显示我的页面它工作正常但在纵向模式下“Content-footer”div不显示。您只需在“Google Chrome设备模式”中查看我的代码，然后选中“纵向模式”和“横向模式”。我附上两个截图。 “内容页脚”div以横向模式显示。

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

Html代码

    <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;
}

Answer 1

出于某种原因（我不知道为什么......），当.Header-wrapper和.Content-Wrapper比视口宽时（例如，宽度超过1024px，iPad版），页脚被推出视野。

例如，尝试给.Header-wrapper和.Content-Wrapper宽度为100％。这工作

在iPad或iPhone中，页脚模式不显示在纵向模式

1 个答案: