Question

我需要帮助，因为我的html页面在移动页面视图中只显示了一半的高度。在浏览器中它看起来不错，但在移动视图中只显示了半页。

div.container {
    width: 100%;
    border: 1px solid gray;
}

a {
    color: white;
    text-decoration: none;
}

.adds {
    position: relative;
    overflow: hidden;
}

.fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fluidMedia iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
     color: white;
    text-decoration: none;
    }

sidebar {
    margin-left: 0px;
    padding: 1em;
    overflow: hidden;
}

<div class="container">

<header>
   <h1>Income Tax Act 1961</h1>
</header>
  

<sidebar>

 <div class="fluidMedia">
    <iframe src="http://www.incometaxact1961.com/Income_Tax/Sections/section2.html" frameborder="0"> </iframe>
</div>

</sidebar>


<footer>Copyright &copy; <a href="http://www.incometaxact1961.com/" >Incometaxact1961.com</a></footer>

我只需要在手机和网页上显示完整的帖子。

任何帮助代码都将受到高度赞赏，我需要在另一个html页面中加载一个html页面。

Answer 1

如果足够的内容未达到设备的高度，它将会是这样的，您可以通过两种方式解决此问题。

为侧边栏设置 min-height 或将页脚粘贴设置到容器的底部。

设置最小高度会因不同的设备而异。所以你需要一个粘性的页脚。这可以在CSS3中使用flex layout。尝试给定的代码。

html,body{
height: 100%;
}
.container{
 display: flex;
 flex-direction: column;
 height: 100%;
}
header{
 flex: 0 0 auto;
}
sidebar{
 flex: 1 0 auto;
}
footer{
 flex:0 0 auto;
}

只要页面上的内容无法适应设备高度，它就会充当粘性页脚。

Answer 2

你可以做的是让你的页脚position: absolute;让它贴在底部，如下所示：

＆＃13;

  div.container {
        width: 100%;
        border: 1px solid gray;
    }

    a {
        color: white;
        text-decoration: none;
    }

    .adds {
        position: relative;
        overflow: hidden;
    }

    .fluidMedia {
        position: relative;
        padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }

    .fluidMedia iframe {
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%;
        height: 100%;
    }

    header, footer {
        padding: 1em;
        color: white;
        background-color: black;
        clear: left;
        text-align: center;
         color: white;
        text-decoration: none;
        }

    sidebar {
        margin-left: 0px;
        padding: 1em;
        overflow: hidden;
    }
    
    footer {
      position: absolute;
      width: 100%;
      bottom: 0;
    }

＆＃13;

    <div class="container">

    <header>
       <h1>Income Tax Act 1961</h1>
    </header>
      

    <sidebar>

     <div class="fluidMedia">
        <iframe src="http://www.incometaxact1961.com/Income_Tax/Sections/section2.html" frameborder="0"> </iframe>
    </div>

    </sidebar>


    <footer>Copyright &copy; <a href="http://www.incometaxact1961.com/" >Incometaxact1961.com</a></footer>

＆＃13;

Answer 3

您可以尝试通过将此元数据插入html head

来将视口的初始比例设置为1

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 4

为了解决您的问题，您不需要添加任何额外的代码或CSS属性。相反，你必须删除一些，特别是删除这些：

.fluidMedia {
    position: relative;
    padding-bottom: 56.25%; 
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.fluidMedia iframe {
    position: absolute;
    top: 0; 
    left: 0;
}

请注意，我说删除这些，而不是你的CSS应该保留它们。因此，CSS的这一部分将如下所示：

.fluidMedia {
    /* You can remove this, since it is empty. I added it for clarity purposes */
}

//This is what is left of the iframe CSS properties
.fluidMedia iframe {
    width: 100%;
    height: 100%;
}

我真的希望这有帮助！

移动视图中的Html页面未显示完整

4 个答案: