1

如果您查看我的简单站点，它在浏览器中运行良好，但在 iphone 上，该站点在横向时会丢失底部功能区。

为什么在横向时不能正确调整页面的高度？ http://mtindustrialservicerequest.com/KenHolidayCard/holidayCardDemo/EmployeeCard2.html

HTML：

<!DOCTYPE html>
<html lang="en">
<HEAD>
<meta charset="utf-8">
</HEAD>
<BODY style="text-align: center; background-color:#e4e4e4; background-image:url(snowflakeBackground500x500.png); margin:0; padding:0;">
<div style="position: absolute; height: 100%; width: 100%; background-image:url(ribbon_Bottom2.png); background-repeat: repeat-y; background-position: center center;">
<div style="position: relative; width: 100%; height:325px; overflow: visible; top: 50%; margin-top: -170px; background-image:url(ribbon_Horizontal2.png); background-position: center center;">
<iframe width="650" height="325" src="http://www.youtube.com/embed/bFs89lAL7dE?&autoplay=1&rel=0&fs=0&theme=light&showinfo=0&controls=0&autohide=1&color=white" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</BODY>
</HTML>
4

2 回答 2

2

它实际上并没有完全消失。从纵向旋转到横向后，我点击刷新。它是可见的（大约 8 个像素）。

我会min-height:320px为垂直功能区添加到您的 CSS 中。320 或您可以使用的其他值。

于 2012-12-04T17:57:44.503 回答
0

我通过将三个 div 堆叠在一起解决了这个问题——顶部和底部带有视频的功能区和中间的水平功能区。顶部和底部高度为 50%，底部/顶部边距补偿中间的 325 像素视频。见下文。

<BODY style="text-align: center; background-color:#e4e4e4; background-image:url(snowflakeBackground500x500.png); margin:0; padding:0;">
<div id="div1" style="position: absolute; height: 100%; width: 100%;">
<div id="div2" style="position: relative; height: 50%; width: 100%; margin-bottom:-170px; background-image:url(ribbon_Bottom2.png); background-repeat: repeat-y; background-position: center center;"></div>
<div style="position: relative; width: 100%; height:325px; overflow: visible; background-image:url(ribbon_Horizontal2.png); background-position: center center;">
<iframe class="shadow" width="650" height="325" src="http://www.youtube.com/embed/bFs89lAL7dE?&autoplay=1&rel=0&fs=0&theme=light&showinfo=0&controls=0&autohide=1&color=white" frameborder="0" allowfullscreen></iframe>
</div>
<div id="div3" style="position: relative; height: 50%; width: 100%; margin-bottom: 170px; background-image:url(ribbon_Bottom2.png); background-repeat: repeat-y; background-position: center center;"></div>
</div>
</BODY>
</HTML>
于 2012-12-04T19:46:47.533 回答