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.
Related
I created app with below code in html file
<ion-content fullscreen>
<div class="header-parent">
<img src="assets/img/bg2.jpg>
<div class="header-social">
<img style="width:18%; margin-right:3vw src="assets/img/love-btn.png">
<img style="width:40%; src="assets/img/friend-btn.png">
<img style="width:18%; margin-right:3vw src="assets/img/chat-btn.png">
<div>
<div class="profile>
<img src="assets/img/profile-pic.png">
</div>
<div>
</ion-content>
and css is as below
.header-parent{
position: relative;
text-align: center;
}
.header-social{
position: absolute;
bottom: 0px;
text-align: center;
margin-top: -5.5vh;
}
.profile{
width: 25%;
margin: 0 auto;
margin-top: -34vh;
}
This shows the page as
My Question is red heart button, blue friend button and green chat button should display below the background image as per the css…but why are they displaying above image? bg2.jpg image is inside the div and all those 3 buttons are given position absolute and bottom:0 so they should display below image as div containing image should end at image.
What is wrong in my understanding? Please clarify…I have spent hours to understand this but still no luck why is it behaving like this?
First you should write your html code properly there is lots of syntax error in ur html code.
<ion-content fullscreen>
<div class="header-parent">
<img src="assets/img/bg2.jpg">
<div class="header-social">
<img style="width:18%; margin-right:3vw" src="assets/img/love-btn.png">
<img style="width:40%;" src="assets/img/friend-btn.png">
<img style="width:18%; margin-right:3vw" src="assets/img/chat-btn.png">
<div>
<div class="profile">
<img src="assets/img/profile-pic.png">
</div>
</ion-content>
And try this css
.header-parent{
text-align: center;
}
.header-social{
position:fixed;
width:100%;
bottom: 0px;
text-align: center;
}
.profile{
width: 25%;
margin: 0 auto;
margin-top: -34vh;
}
Negative margin of -5.5vh is causing the .header-social to move up and overlap on the profile pic. Here's how your CSS should be to get the desired output.
.header-parent{
background-image:('assets/img/bg2.jpg'); //bg image would be a better option rather than an img tag
position:relative; //for positioning profile div relatively
}
.header-social{
position:absolute;
bottom:0;
}
.profile{
width: 25%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
//this will position the profile pic centered both horizontally & vertically.
}
UPDATE:
I rebuilt the page with all relatively-positioned elements and the thing is still stuck when I navigate via pageid. I think it's definitely a Safari-specific overlap conflict and it is super annoying. Any ideas out there?
I'm working on a microsite that uses pageid's to navigate through full-page div's, arranged vertically with the overflow hidden. It works just fine on every browser, including mobile, except desktop versions of Safari.
The div's scroll when the page is refreshed to the specific pageid, and will scroll if the text is highlighted and dragged, but if you start at page 01 and navigate to page 02 (like you're supposed to), the content will not scroll.
It seems like it might be an overflow conflict, but I tried to do this with the page div's scrolling horizontally to separate the x- and y-axis issue and I got nothing. It's acting more like there's a transparent layer in between me and the scroll...
Check out the microsite here: http://www.kevinjbeaty.com/trailtool-stackoverflow
Note that it works just fine everywhere else.
This is the basic html:
<div class = "viewbox">
<div id= "page01" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
</div>
<div id= "page02" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
<div class="contentscroll">
**this is text that should scroll**
</div>
<div id= "page03" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
</div>
<div id= "page04" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
<div class="contentscroll">
**this is text that should scroll**
</div>
</div>
and the basic css:
.viewbox {
position: relative;
height: 100%;
width: 100%;
display: block;
overflow: hidden;
background-color: black;
z-index:0;
}
.page {
position: relative;
height: 100%;
width: 100%;
display: block;
z-index:1;
overflow: scroll;
background-color: white;
z-index:10;
}
.content {
position: absolute;
padding: 2%;
background-size: contain;
background-repeat: no-repeat;
display: block;
}
.contentscroll {
position: absolute;
padding: 2%;
overflow-y: scroll;
overflow-x: hidden;
display: block;
z-index: 200;
}
Got it! Wow.
I changed the body "overflow" to "hidden" and got rid of the ".viewbox" wrapper altogether and viola! Stupid simple...
I saw there are many similar questions, but I can't find one solution working for me.
My page has this structure:
<body>
<div id="whole_page">
<div id="header"></div>
<div id="main">
<div id="img_container"></div>
<div id="img_container"></div>
<div id="img_container"></div>
</div>
</div>
</body>
My css is:
html,body{
height:100%; width:100%;
padding-top:50px;
}
#whole_page{
height:calc(100%-50px); width:100%;
}
#header{
position:fixed;
height:50px; // header
}
#image_container{
width:100%;
height:30%;
}
I want to set "main" 's height to 100% (window height) minus header height (50px).
Further, I want each div with id "image_container" to be 30% of the "main" div and large 100% of widonws width. So that I have approximately 3 of those div in the page, before needing to scroll.
The problem is that % seem to not work at all. As I didn't write them (tried with Chrome's dev tools).
Actually I am using bootstrap to fill content of header/main but as far as I know this shouldn't give problems with height.
Any clue?
Thanks in advance
Your key problem is that you did not change the height of #main. You also had a miss type between your CSS and HTML, in your CSS you referred to #image_container while in your HTML you used 'id="img_container"'. I change both CSS and HTML to '.img_container' and 'class="img_container"' respectively. I also noticed that you had twice the amount of space at the top than the size needed for your #header since 'padding-top: 50px;' was applied to html and body.
Here is the code:
<div id="whole_page">
<div id="header" style="background-color: yellow;"></div>
<div id="main">
<div class="img_container" style="background-color: red;"></div>
<div class="img_container" style="background-color: blue;"></div>
<div class="img_container" style="background-color: green;"></div>
</div>
</div>
and
html, body {
height:100%;
width:100%;
}
body {
margin: 0;
padding-top:50px;
}
#whole_page {
height: calc(100% - 50px);
width: 100%;
}
#header {
position: fixed;
height: 50px;
width: 100%;
top: 0;
}
#main {
height: 100%;
}
.img_container {
width: 100%;
height: 30%;
}
PS - add color to some of the tags so I could see them. You can just delete the style attribute from the '#header' and '.img_container' tags.
EDIT - Here is a jsfiddle: http://jsfiddle.net/xiondark2008/DJJ2d/
EDIT2 - Just side thought, 'height: calc(100%-50px);' is an invalid property, at least in chrome, however 'height: calc(100% - 50px);' is a valid property, again, at least in chrome.
You can use box-sizing: border-box and padding..
http://jsfiddle.net/jVkL6/
I dont really understand how is possible that a
<div style="clear:both"></div>
doesn't work in Chrome. I have this layout:
<div id="header">...</div>
<div id="content">
<div id="col1">...</div> <!-- float left -->
<div id="col2">...</div> <!-- float left -->
<div id="col3">...</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">...</div>
So, I've used the clear:both before the footer and/or after the col3.
It does not work either in IE7 but, in this moment I dont really care.
Can anyone help me please?
I Add more informations:
#content {
padding-top: 19px;
display: block;
}
#col1,
#col3 {
width: 21%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
#col2 {
width: 58%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
SOLVED: Im sorry.... the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow...
Hope i ve been clear in the explanation..
However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied
It actually works. You are just not using it properly.
If you use clear:both the following element will be effected only. So for instance,
floated left | floated left | clear: both;
floated left | clear: left;
floated left | cleawr: right; | floated: left
Imagine that each text between "|" is a block element. If you float the elements and use the clear like the example above, the code should display something like above.
Check here for a live example: Try removing the clear attribute and you will see how the browser places "DOES NOT WORK".
http://jsfiddle.net/6VjSL/
clear:both works just fine in Chrome/IE7. See this example of how to properly use it. http://jsfiddle.net/turiyag/LvMRY/2/
Can you post a link to your site, or your full actual code?
CSS:
div {
border: 1px solid black;
}
.floaty {
height: 50px;
width: 50px;
float: left;
background: green;
}
.cleary {
height: 100px;
width: 200px;
clear: both;
background: cyan;
}
HTML
<html>
<head>
</head>
<body>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="cleary">Cleary</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
</body>
</html>
use clear:none; in the css property. It will work in chrome
Is better for semantic to use a class for this things. The correct way to go is:
HTML
<div id="header">...</div>
<div id="content" class="clearfix">
<div id="col1">...</div> <--- float left
<div id="col2">...</div> <--- float left
<div id="col3">...</div> <--- float left
<div class="clearfix"></div> <--- DOES NOT WORK
</div>
<div id="footer">...</div>
CSS:
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Yes it’s ugly, but it works very well, enabling designers to clear floats without hiding overflow and setting a width or floating (nearly) everything to get the job done.
Then it does not work anywhere ? :o)
You are probably applying the float:left to the clear:both divs too...
this works in all browsers:
http://jsfiddle.net/kKwkd/
HTML
<div id="header">aaaaaaaaaaaaaaaaaa</div>
<div id="content">
<div id="col1">bbb</div> <!-- float left -->
<div id="col2">ccc</div> <!-- float left -->
<div id="col3">ddd</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">xxxxxxxxxxxxx</div>
CSS
#header, #footer{
border: 1px dashed blue;
}
#col1,#col2,#col3{
float: left;
border: 1px solid red;
padding: 50px;
margin: 10px;
}
the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow... Hope i ve been clear in the explanation.. However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied
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.