Html page is not showing full in mobile view - html

Question

I need Help, as my html page is showing only half height in Mobile page view. in browser it looks ok but in mobile view only half a page is being displayed.
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 © <a href="http://www.incometaxact1961.com/" >Incometaxact1961.com</a></footer>
I just need post to display full in mobile and web page.
Any help code will be highly appreciated, I need to load a html page in another html page.

Answer 1

If the enough content does not reach the device's height,it will come like this, You can fix this by two ways.
Set a min-height for the sidebar or make the footer sticky to the bottom of the container.
Setting minimum height will vary for different devices.So you need a sticky footer for this case.It is possible in CSS3 using flex layout.Try the given code.
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;
}
It will act as sticky footer whenever your content on the page cannot fits the device height.

Answer 2

What you could do is giving your footer position: absolute; to make it stick to the bottom, like so:
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;
}
<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 © <a href="http://www.incometaxact1961.com/" >Incometaxact1961.com</a></footer>

Answer 3

You can try setting initial scale of viewport to 1 by inserting this meta to html head
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 4

In order to fix your issue yo do not need to add any extra code or CSS properties. Instead, you have to delete a few, in particular, remove these:
.fluidMedia {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.fluidMedia iframe {
position: absolute;
top: 0;
left: 0;
}
Please, note that I said REMOVE these, not that your CSS should keep them. So this section of your CSS will look like:
.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%;
}
I really hope this helps!