I have an iframe with the following code:
<div class="intrinsic-container intrinsic-container-16x9">
<iframe src="adf.html"></iframe>
</div>
The iframe includes a page with:
<body>
<div id="map-holder">
<div id="vmap"></div>
<div id="directions"></div>
<!--Use this to display data-->
</div>
</body>
For the iframe I have the css code:
.intrinsic-container {
position: relative;
height: 0;
overflow: hidden;
}
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
padding-bottom: 75%;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
The page has:
#map-holder {
position: relative;}
#vmap {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#directions {
width: 100%;
text-align: center;
font-family: sans-serif;
font-weight: 100;
font-family: 'Lora', serif;
color: #666666;
}
The page includes the Jquery Vmap plugin. The problem is, that I have scrollbars on the right. They come from #directions div. If I delete this div, the scrollbars disappear. The additional height from #directions is not rendered to the body and html node... any ideas?
Related
Using this question as a starting point I've changed things a little to match my purpose. Unfortunately I don't seem to be able to save this in jsfiddle as after saving the result always is "404 That page doesn't exist."
So here's the original code:
http://jsfiddle.net/JP3zW/
/* In a Reset CSS */
body, div {
margin: 0;
padding: 0;
}
/* Style CSS */
html, body { height: 100%; }
body {
position: relative;
background: #F4F4F4;
}
iframe#iframe {
width: calc(100% - 200px);
height: calc(100% - 100px);
overflow: hidden;
}
div#sidebar {
top: 0;
right: 0;
position: fixed !important;
height: 100%;
width: 200px;
background: gray;
}
div#bottombar {
bottom: 0;
height: 100px;
width: 100%;
background: black;
z-index: -1;
}
<iframe id="iframe" name="iframe1" frameborder="0" height="100%" width="100%" src="http://someurl.com"></iframe>
<div id="bars">
<div id="bottombar"></div>
<div id="sidebar"></div>
</div>
The result is, that the iframe somehow is displayed centered. However I'd like to have it aligned with the top left corner so that the left part of the embedded contents is visible.
I've tried align="left" and other in the HTML iframe definition but to no avail.
What do I need to do to have the contents of the iframe aligned top left?
As I see it, your iframe displays correct, but the sidebar is just overlapping the iframe because of the position: fixed.
I have changed a bit in the CSS, and used percentage instead of pixels, for it to be responsive.
Let me know if it works for you.
/* In a Reset CSS */
body,
div {
margin: 0;
padding: 0;
}
/* Style CSS */
html,
body {
height: 100%;
}
body {
position: relative;
background: #F4F4F4;
}
iframe#id_iframe {
width: 70%;
float:right;
height: 100%;
overflow: hidden;
}
div#id_sidebar {
float:left;
height: 100%;
width: 30%;
background: lightgray;
}
I'm using an image as a full-screen background. When I put a new div underneath the content of the div gets mish-mashed with the image instead of allowing scrolling.
html {
scroll-behavior: smooth;
;
}
body {
background-color: #FBEEC1;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background-image: url(tempbackground.jpg);
width: 100%;
height: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
}
#title-text {
position: absolute;
width: 500px;
height: 250px;
top: 50%;
left: 50%;
margin-left: -250px;
/* divide each margin in 1/2 */
margin-top: -125px;
}
.body-text {
display: none;
/*This will be enables after scrolling with a scroll animation */
color: #BC986A;
width: 100%;
}
.text-width {
margin: 0 auto;
width: 50%;
}
.font-title {
font-family: "Times New Roman", Times, serif;
}
.font-body {
font-family: Arial, Helvetica, sans-serif;
}
<div id="header">
<img id="title-text" src="Logo-text.png">
</div>
<div class="body-text" id="font-title">
<h2 class="text-width">Our Forests Are Under Attack!</h2>
<p class="text-width" id="font-body">Sample text that should display below image.</p>
</div>
For what i understood, you want that the page you first up see after opening your file in browser to be blank and when you scroll down you see your content.
for this make a empty container
<div class="empty-page"></div> and set its height in css file to 100 vh( viewport height ).
.empty-page {
height: 100vh;
}
<body>
<div class="empty-page"></div>
<!-- your rest of the code -->
<h1>THIS IS A HEADING</h1>
</body>
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.
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.
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>
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">
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!
I have a site which looks good in quirks mode:
the navbar is always shown
the content has a minimum height
the content is streched when the page is enlarged: content height = document height - navbar height - footer height
Now, I'd like to change to the strict mode by adding <!DOCTYPE html>. I tried a lot of things but I didn't get the same behaviour. The content isn't streched anymore.
I've put the code in this fiddle: http://jsfiddle.net/5e1yvLxj/
In the fiddle the strict mode is activated.
index.html
<html lang="en">
<head>
<link href="main.css" rel="stylesheet"/>
</head>
<body>
<div id="nav">
</div>
<div id="messages">
<div id="chat-box">
</div>
</div>
<div id="footer">
</div>
</body>
main.css
html {
min-height: 100%;
position: relative;
}
body {
background-color: #004269;
margin-top: 112px; /* nav */
margin-bottom: 190px; /* footer */
}
#nav {
height: 100px;
position: absolute;
top: 0;
width: 100%;
background-color: #227733;
}
#messages {
position: relative;
margin: 0;
position: relative;
min-height: 200px;
padding: 10px;
background-color: white;
padding: 15px; }
#chat-box {
position: relative;
min-height: inherit;
padding-top: 0px;
height: 100%;
}
#footer {
padding-top: 20px;
background-color: #227733;
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
}
Just use one of those sticky footer techniques:
document.getElementById("messages").onclick = function() {
var p = document.createElement("p");
p.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
this.appendChild(p);
}
html, body {
margin: 0;
height: 100%;
}
#nav {
height: 100px;
background-color: #227733;
position: relative; /* force higher z-index than next divs */
}
#footer {
height: 150px;
background-color: #227733;
}
#messages {
min-height: 100%;
margin-top: -100px; /* match header height */
margin-bottom: -150px; /* match footer height */
background-color: #EEEEEE;
}
#messages:before {
content: "";
display: block;
height: 100px; /* match header height */
}
#messages:after {
content: "";
display: block;
height: 150px; /* match footer height */
}
<div id="nav">#nav</div>
<div id="messages">#messages (click to add content)</div>
<div id="footer">#footer</div>
You use too much position: relative and absolute. This can be useful in some cases but not here. Try the following for a change.
You can also use the calc to calculate the pixels using the percentage that the static nav and footer heights.
html {
height: 100%;
}
body {
background-color: #004269;
/* nav */
/* footer */
height: 100%;
}
#nav {
height: 100px;
width: 100%;
background-color: #227733;
margin-top:0px;
}
#messages
{
margin: 0;
background-color: white;
padding: 15px;
height: calc(100% - 100px - 150px);
overflow: hidden;
}
#chat-box {
min-height: inherit;
padding-top: 0px;
margin: 0;
background-color: white;
padding: 15px;
}
#footer {
padding-top: 20px;
background-color: #227733;
margin-bottom: 0px;
width: 100%;
height: 150px;
}
Here's a small JavaScript that'll do it without you're having to modify anything else you already have there:
window.onload = function() {
var nav = parseInt(document.defaultView.getComputedStyle(document.getElementById('nav'), null).height),
footer = parseInt(document.defaultView.getComputedStyle(document.getElementById('footer')).height);
document.getElementById('messages').setAttribute('style', 'height: ' + (window.innerHeight - nav - footer) + 'px;');
}
JSFiddle: http://jsfiddle.net/7kobcy8o/
I verified it working in IE11 and Chrome 39.
I'd like to have my header fixed: header is always at the top of page and my whole content (everything including footer) could be scrolled. Header is 60 px high as you can see below and it's not the problem to make it fixed at the top.
The problem I want to solve (using only CSS) is to have scrollbar starting below these 60 pixels from the top.
As you can see, the bottom of the scrollbar (2. arrow) is actually hidden/moved down. I guess by my problematic 60px.
So it goes like this:
HTML:
<!DOCTYPE html>
<head>
...
</head>
<body>
<header>
...
</header>
<div id="content">
...
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
}
body {
background: #d0d0d0;
overflow-y: hidden;
}
header {
background: #fff;
height: 60px;
width: 100%;
position: fixed;
top: 0;
}
#content {
margin-top: 60px;
height: 100%;
width: 100%;
overflow-y: scroll;
}
What am I missing in my CSS?
Thanks guys.
// Edit as a reply to the forst answer here (to John Grey)
Commentary below your comment:
Here is a jsfiddle how to solve your problem:
http://jsfiddle.net/sTSFJ/2/
Here is the css:
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: 100%;
margin: auto;
position: relative;
}
#header {
height: 40px;
background-color: blue;
color: #fff;
}
#content {
position:absolute;
bottom:0px;
top: 40px;
width:100%;
overflow: scroll;
background-color: #fff;
color: #666;
}
Your #content height is equal body height, but you have a header so... Try use this:
html, body {
height: 100%;
}
body {
background: #d0d0d0;
overflow-y: hidden;
}
header {
background: #fff;
height: 5%;
width: 100%;
position: fixed;
top: 0;
}
#content {
margin-top: 5%;
height: 95%;
width: 100%;
overflow-y: scroll;
}
You can solve this using the calc property. That is instead of height 95%, since you don't know if 5% == 60px rather do the following:-
#content {
margin-top: 5%;
height: calc(100%-60px);
height: -webkit-calc(100%-60px); /*For webkit browsers eg safari*/
height: -moz-cal(100%-60px); /*for firefox*/
width: 100%;
overflow-y: scroll;
}