I would like to have a footer in my page and I have the following code
<div class="container">
<div class="row">
<iframe id="iframe" width="100%" height="100%" src="http://www.selitera.com" style="border: 0; top:0; left:0; right:0; bottom:0; width:100%; height:100%" />
</div>
<div class="row">
Some footer text
</div>
</div>
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
}
.container {
height: 100%;
width: 100%;
display: block;
}
https://jsfiddle.net/6fqcnmaj/
I would like to load my footer on the page always and have the available space for the iframe above the footer?
Any pointers to do this?
You have to add the closing </iframe> tag
https://jsfiddle.net/6fqcnmaj/1/
i have try to do some changes in your code and i found that when you added iframe tag it wasn't closed that's why your footer wasn't appearing. this is an example how we write Iframe tag. Have a look.
And i'm adding a solution screenshot. please have a look.
This image is a solution of your question please look at the red border in bottom right side.
I need to make a youtube iframe responsive and also that the iframe is left floating to add content to the right, I tried with this code but the iframe is not responsive?
Thanks.
The JSFiddle : http://jsfiddle.net/94150148/vh04d7y2/
.videoWrapper {
position: relative;
padding-bottom: 51.44%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box1 {
float:left;
width: 400px
}
<div class="box1">
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/6apL89xgbR0"
frameborder="0" allowfullscreen></iframe></div></div>
<div class="box2">Some text</div>
I will suggest to use Bootstrap for making embedded videos responsive which are added through iframe, following is the code which you can use to make the iframe responsive
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
But make sure to add bootstrap.css and and other bootstrap dependencies.
All you need is max-width:
.left {max-width: 400px;}
How to allign the div to extend its width to match the size of iframe content.
Need to extend the parent div to match the content of iframe. if the content generated by the iframe is exceeding the width of the parent div, how to automatically expand the width of parent div???
CSS
#header {
background-color:#FFA500;
}
#container {
width:500px;
position:absolute;
left:200px;
vertical-align:center;
}
#mainContainer {
border:0px solid red;
height:auto;
}
#menu {
background-color:#FFD700;
height:auto;
width:100px;
float:left;
}
#content {
background-color:#EEEEEE;
height:auto;
width:400px;
float:left;
}
#footer {
background-color:#FFA500;
text-align:center;
clear:both;
}
.width-2 {
width: 500px;
}
.iframeContainer {
border:1px solid red;
width: auto;
}
.iframeContainer .embed-container iframe {
width: auto;
height:100%;
border:1px solid royalblue;
}
.width-auto .embed-container iframe {
width: auto;
}
.expected {
width: 400px;
background: green;
}
HTML
<div id="container" >
<div id="header" >
<h1 style="margin-bottom:0;"> Web Page</h1>
</div>
<div id="mainContainer">
<div id="menu" >
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript<br>
HTML<br>
CSS<br>
HTML<br>
CSS<br>
JavaScript<br>
HTML<br>
CSS<br>
HTML<br>
CSS<br>
JavaScript<br>
HTML<br>
CSS<br>
HTML<br>
CSS<br>
JavaScript<br>
HTML<br>
CSS<br>
HTML<br>
CSS<br>
JavaScript<br>
HTML<br>
CSS<br>
</div>
<div id="content">
Content goes here
<p>You might have seen floating content of web sites which is always visible on the page even if you scroll it. This is easy achieve thing by using just CSS. However there is also JavaScript alternative for this but the CSS one is smoother and faster as this doesn't includes any run time calculation. The below step by step process will guide to how to add a always visible div on web page.</p>
</div>
<div class="iframeContainer">
<div class="embed-container">
<iframe src="http://player.vimeo.com/video/30279492?title=0&byline=0&portrait=0" width="400" height="180" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div id="footer">
Copyright © W3Schools.com</div>
</div>
It depends on the relationship you have with this iframe.
If it is your own content hosted in the same domain as the parent, you can easily grab the contents using javascript (jQuery example): $("iframe").contents().find("#content").width()
If it is hosted under a different domain from the parent, you cannot access the content, but if you own the content, you can set up a communication channel between the iframe and the parent, using Window.postMessage(), so you can send the width value - https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
If it is not your own content, then you can't access it via iframe for obvious reasons - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript - Unless the content provider has an API to interact with the content, like Facebook does.
I have a problem trying to move div's on the page based on the screen size..
I have got my pages (code as per below) displaying the width correctly but can't seem to get the height correct when the user re-sizes the page.
What I am trying to do is..
have a header that is displayed across the top
a page on the left which will have a menu in it
a page to the right that will display the page text
a footer across the bottom
My pages looks like this below:
index.htm:
<style type="text/css">
body{
margin:0;
padding:0px;
line-height: 1.5em;
padding-bottom:10px; /* Height of the footer */
}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
</style>
<!-- top -->
<div id="topsection">
<div>
This is the top
</div>
</div>
<!-- Left side -->
<div ID="left" STYLE="width:260px; left:0px; height:90%; float:left;">
<iframe src="test.htm" NAME="menu" width="270px" height="100%" frameborder="0"></iframe>
</div>
<!-- right side -->
<div ID="right" STYLE="height:90%; left:0px; float:left;">
<iframe src="test1.htm" NAME="right" width="100%" height="100%" frameborder="0"></iframe>
</div>
<!-- footer -->
<div ID="foot" STYLE="height:10%; left:0px; top:90%; float:left;">
<iframe src="foot.htm" NAME="footer" width="100%" height="100%" frameborder="0"></iframe>
</div>
test.htm:
<body bgcolor="#808080">
test1.htm:
<body bgcolor="#88888888">
right side text
foot.htm:
<body bgcolor="#9999999">
This is a footer
Your Header:
#topsection{
position:absolute;
}
Your footer:
#foot{
position:absolute;
}
you should use absolute I think
Here is some more info about the position 'tag' in css
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
do this for top bar and footer.
hope might work in your case.
#topsection{
position:fixed;
................
}
#foot{
position:fixed;
................
}
This is exactly what you ak for. Fixed header and footer
I have a navigation bar on the left hand side of my page, and I want it to stretch to 100% of the page height. Not just the height of the viewport, but including the areas hidden until you scroll. I don't want to use javascript to accomplish this.
Can it be done in HTML/CSS?
Here is the solution I finally came up with when using a div as a container for a dynamic background.
Remove the z-index for non-background uses.
Remove left or right for a full height column.
Remove top or bottom for a full width row.
EDIT 1: CSS below has been edited because it did not show correctly in FF and Chrome. moved position:relative to be on the HTML and set the body to height:100% instead of min-height:100%.
EDIT 2: Added extra comments to CSS. Added some more instructions above.
The CSS:
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}
The html:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>
Why?
html{min-height:100%;position:relative;}
Without this the cloud-container DIV is removed from the HTML's layout context. position: relative ensures that the DIV remains inside the HTML box when it is drawn so that bottom:0 refers to the bottom of the HTML box. You can also use height:100% on the cloud-container as it now refers to the height of the HTML tag and not the viewport.
With HTML5, the easiest way is simply to do height: 100vh. Where 'vh' stands for viewport height of the browser window. Responsive to resizing of browser and mobile devices.
I had a similar problem and the solution was to do this:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}
I wanted a page-centered div with height 100% of page height, so my total solution was:
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}
You might need to make a parent element (or simply 'body') have position: relative;
You can cheat using Faux Columns
Or you can use some CSS trickery
Use position absolute. Note that this isn't how we are generally used to using position absolute which requires manually laying things out or having floating dialogs. This will automatically stretch when you resize the window or the content. I believe that this requires standards mode but will work in IE6 and above.
Just replace the div with id 'thecontent' with your content (the specified height there is just for illustration, you don't have to specify a height on the actual content.
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>
The way that this works is that the outer div acts as a reference point for the nav bar. The outer div is stretched out by the content of the 'content' div. The nav bar uses absolute positioning to stretch itself out to the height of its parent. For the horizontal alignment we make the content div offset itself by the same width of the navbar.
This is made much easier with CSS3 flex box model, but that's not available in IE yet and has some of it's own quirks.
I ran into the same problem as you. I wanted to make a DIV as background, why, because its easy to manipulate div through javascript. Anyways three things I did in the css for that div.
CSS:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}
It's simple using a table:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>
When DIV was introduced, people were so afraid of tables that the poor DIV became the metaphorical hammer.
I want to cover the whole web page before prompting a modal popup. I tried many methods using CSS and Javascript but none of them help until I figure out the following solution. It works for me, I hope it helps you too.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>
Good luck ;-)
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
If you are targeting more modern browsers, life can be very simple.
try:
.elem{
height: 100vh;
}
if you need it at 50% of the page, replace 100 with 50.
document.body.onload = function () {
var textcontrol = document.getElementById("page");
textcontrol.style.height = (window.innerHeight) + 'px';
}
<html>
<head><title></title></head>
<body>
<div id="page" style="background:green;">
</div>
</body>
</html>
This is how you can make your side nav as tall as the page content, without having to change the body to be flex or table.
Don't set html or body to height 100%, because that will make it only as tall as the browser viewport, and the page will be overflowing that, and your nav will only be as tall as the viewport.
Just set your nav to height:100% position:absolute with the html tag position:relative.
The reason this works is because height 100% only works if its container is fixed height, with the exception (for some reason) the html tag.
<html style='position:relative'>
<body style='margin:0'>
<div style='height:100%; position:absolute; top:0; background:linear-gradient(to bottom,red,green); border:2px solid blue'>
nav
</div>
<div style='font-size:99px;padding:33px'>
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
</div>
</body>
</html>
This code works but not fully supports:
height: 100svmax;
Browsers support
Edit
Sorry, old answer is not correct..
i have tried all viewport units
but the only solution work using javascript here
Simple, just wrap it up in a table div...
The HTML:
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>
The CSS:
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>
I succeeded with
min-height: 100vh
for both, the menu and content div.