Question

我有一个我为朋友制作的网站，在mobile homepage上，页脚完全对齐。但是，当您转到pics或vids页面时，页脚会移到左侧。可以找到css文件here。我不知道为什么会这样，有任何帮助来理解为什么会这样，以及如何解决这个问题会很棒。

快速说明一下，要访问桌面上的移动版本，请使用Chrome，打开开发工具，然后单击开发工具窗格左上角的电话图标。将宽度设置为617，将高度设置为1002。

谢谢！

Answer 1

您的内容从pf-content类溢出，使页面宽度超过页脚填充的宽度的100％。

有很多方法可以解决这个问题：

向pf-content添加隐藏的溢出（在小屏幕上看起来很讨厌）
在整页body{ min-width: 1200px; }
让视频具有反应性，例如：显示内联块，如果页面很小，它将换行到新行。（也可以使用用于缩放视频的媒体查询）

我建议让页面更具响应性，如果页面太小而无法包含多个，则会让视频流入新行。作为一般规则，表格不是构造任何东西的好方法（除了实际的数据表），你可以用更灵活的元素来改善。虽然这对你来说会更有效。

Answer 2

视频的两个iframe的宽度设置为520px，超过了您测试的分辨率。

iframe被放置在一个具有固定数量列的表中，导致溢出问题。

您可以将iframe放在div中，然后更改它们在css中的显示方式。即，如果首选，您可以在desktop.css中执行类似于2列的结构，并在mobile.css中执行响应式结构

<div class="video-container">
        <iframe src="https://player.vimeo.com/video/146191500?title=0&amp;portrait=0" width="520" height="293" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

    <div class="video-container">
            <iframe src="https://player.vimeo.com/video/141281580?title=0&amp;portrait=0" width="520" height="293" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
    </div>
    <style>
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 35px;
        height: 0;
        overflow: hidden;
    }
    .video-container iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    </style>

不同移动网页上的页脚较小

2 个答案: