I have a sticky footer that uses the flexbox technique which works perfectly fine and expands when the content fills the page.
I'm now trying to add a conditional, based on a particular user, fixed position bottom navbar. i've applied margin-bottom to the footer which is fine when the content fits within the page however when the content grows i cannot scroll the page to the bottom and view the full footer. It seems the bottom-margin is not applied to the footer when the content grows to fill the page. Any help would be appreciated, example code and Codepen below.
<html>
<head>
<style>
html, body {
/* IE 10-11 didn't like using min-height */
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
.footer {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 0 0 20px 0;
}
footer {
background: #42A5F5;
color: white;
margin-bottom: 25px;
height: 50px;
}
.conditionalNav {
position: fixed;
bottom:0;
left:0;
width:100%;
background:green;
color: white;
padding:5px;
hight:25px;
}
</style>
<meta charset="UTF-8">
<title>Sticky Footer with Flexbox</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
<p><button id="add">Add Content</button></p>
<p>some content</p></div>
<footer class="footer">
Footer
</footer>
<div class="conditionalNav">
Conditional bottom navbar
</div>
</body>
</html>
https://codepen.io/pinman/pen/eYBLYOR
Setting height: 100% on html and body (as opposed to min-height) prevents the document height from exceeding the viewport height, so your additional content is overflowing scrollable area.
You could remove body from the 100%, leaving it on html, or add overflow: auto to the html/body rule so that the body element can scroll (as opposed to scrolling the window).
Edit: removing 100% height from body allows the footer to move off the bottom of the window. Updated accordingly.
html, body {
/* IE 10-11 didn't like using min-height */
height: 100%;
overflow: auto;
}
You also have a typo in your .conditionalNav rule:
hight:25px;
I have a centered div layer using margin: 0 auto, with a fixed width of width: 1000px, which will go width: 100% when starting to scroll down, along with a transition to make it look nice.
The problem is, that some of the content starts to shake and jitter during the transition. I say some of the content, because for example images shake, while H1 texts does not
This only happens in Chrome and Edge. (tested on windows 10).
Doing some research, I found Chrome had known issues in the past with transitions when not using hardware acceleration, resulting in flickering. From what I understand, this has been solved by Google over 2 years ago.
I tried implementing all sorts of workarounds, trying to trigger a hardware acceleration, but nothing worked.
From what I learned so far, this jittering / shaking issue only happens when a div layer is centered using margin: 0 auto with a fixed width and that element is then transitioned into width: 100%.
A strange issue, when re-creating the demo code inside of JSFiddle, I can’t seem to always reproduce it on my system.
Here is the JSFiddle: https://jsfiddle.net/aobrien/vc4n8ecy/
Just scroll down and notice how the chrome logo shakes. You might have to scroll up and down to noticed it, depending on your screen size.
Note: This only seems to be visible when you have a screen width of around 1700px or higher, so make sure your browser is in full width. Scaling the browser window to 80% also triggers the issue.
//jQuery to add sticky class when scrolling
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('.header').addClass("sticky");
} else {
$('.header').removeClass("sticky");
}
});
body {
height: 2000px;
}
.header {
background: #335C7D;
margin: 0 auto;
width: 1000px;
transition: width .6s ease;
height: 200px;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
right: 0;
will-change: width;
}
.wrap {
width: 1000px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div class="wrap">
<img src="https://i.stack.imgur.com/iaYsc.png" />
<h1> Hello World.</h1>
</div>
</div>
</div>
This seems to be very easy and straight forward way of achieving a full width sticky menu with transition.
Could it be that using margin: 0 auto along with a width change, results in problems to recalculate the centered div layer?
So far, all my attempts to solve this or find a workaround, have failed.
It seems I found one solution.
Adding display: table; to the element that uses the transition property, seems to remove the shaking.
//jQuery to add sticky class when scrolling
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('.header').addClass("sticky");
} else {
$('.header').removeClass("sticky");
}
});
body {
height: 2000px;
}
.header {
background: #335C7D;
margin: 0 auto;
width: 1000px;
transition: width .6s ease;
height: 200px;
display: table; /* this seems to fix it */
}
.sticky {
position: fixed;
width: 100%;
left: 0;
right: 0;
will-change: width;
}
.wrap {
width: 1000px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div class="wrap">
<img src="https://i.stack.imgur.com/iaYsc.png" />
<h1> Hello World.</h1>
</div>
</div>
</div>
In my Rails app, I'm using Twitter Bootstrap. My footer is properly displayed on screens with landscape mode with width required enough.
Here is how it looks:
But, on a browser on my Android Galaxy Note, it appears broken. The footer appears correct if I use the browser in landscape mode, but in the portrait mode it breaks. It looks like:
Here is my code:
<div id="footer">
<div class="container">
<p class="muted credit" style="text-align: center" >
© 2013 WebsiteName.com All Rights Reserved. |
Privacy Policy |
<%= link_to 'Terms of Service', terms_of_service_path %>
</p>
</div>
</div>
The CSS for the above is borrowed from Example - sticky-footer :
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
position: fixed;
left:0;
top:0;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
.container .credit {
margin: 20px 0;
}
I don't know why does it not render it correctly. I am new to the Responsive CSS and I am learning. Please let me know what's wrong.
It renders perfectly normal. There is not enough space for the content to fit on one row, so it goes on a new row. If you want your links not to be separated on two rows like this and always fit on one row, try: white-space: nowrap; on the anchor tag, globally or on resolution of your choice.
I was reading Can You Make an iFrame Responsive?, and one of the comments/answers led me to this JSFiddle.
But when I tried to implement the HTML and CSS to fit my needs, I didn't have the same results/success. I created my own JSFiddle so I could show you how it doesn't work the same for me. I'm sure it has something to do with the type of iFrame I'm using (e.g., the product images might need to be responsive too or something?)
My main concern is that when my blog readers visit my blog on their iPhone, I don't want everything to be at x width (100% for all my content) and then the iFrame misbehaves and is the only element wider (and hence sticks out past all the other content - if that makes sense?)
Does anyone know why it's not working?
Here is the HTML & CSS of my JSFiddle (if you don't want to click on the link):
.wrapper {
width: 100%;
height: 100%;
margin: 0 auto;
background: #ffffff;
}
.h_iframe {
position: relative;
}
.h_iframe .ratio {
display: block;
width: 100%;
height: auto;
}
.h_iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="wrapper">
<div class="h_iframe">
<!-- a transparent image is preferable -->
<img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
<iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe>
</div>
</div>
I present to you The Incredible Singing Cat solution =)
.wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/
As you move the window bar, you'll see iframe to responsively resize
Alternatively, you may also use the intrinsic ratio technique
This is just an alternate option of the same solution above (tomato, tomato)
.iframe-container {
overflow: hidden;
padding-top: 56.25%; /* 16:9 */
position: relative;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
border: 0;
width: 100%;
height: 100%;
}
Try using this code to make it responsive
iframe, object, embed {
max-width: 100%;
}
I found a solution from from Dave Rupert / Chris Coyier. However, I wanted to make the scroll available so I came up with this:
.myIframe {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch; /*<<--- THIS IS THE KEY*/
border: solid black 1px;
}
.myIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="myIframe">
<iframe> </iframe>
</div>
You can use this tricks mentioned on this site http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php.
Its very useful and easy to understand. All you need to create
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
Here is your edited js fiddle for demonstration.
Check out this solution. It works for me
https://jsfiddle.net/y49jpdns/
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
html body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
font-family: arial;
font-size: 10px;
color: #6e6e6e;
background-color: #000;
}
#preview-frame {
width: 100%;
background-color: #fff;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var calcHeight = function() {
$('#preview-frame').height($(window).height());
}
$(document).ready(function() {
calcHeight();
});
$(window).resize(function() {
calcHeight();
}).load(function() {
calcHeight();
});
</script>
</head>
<body>
<iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
</iframe>
</body>
</html>
iframe{
max-width: 100% !important;
}
iFrames CAN be FULLY responsive while keeping their aspect ratio with a little CSS technique called the Intrinsic Ratio Technique. I wrote a blog post addressing this question specifically: https://benmarshall.me/responsive-iframes/
This gist is:
.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%;
}
<div class="intrinsic-container intrinsic-container-16x9">
<iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
BOOM, fully responsive!
iframes cannot be responsive. You can make the iframe container responsive but not the content it is displaying since it is a webpage that has its own set height and width.
The example fiddle link works because it's displaying an embedded youtube video link that does not have a size declared.
DA is right. In your own fiddle, the iframe is indeed responsive. You can verify that in firebug by checking iframe box-sizing. But some elements inside that iframe is not responsive, so they "stick out" when window size is small. For example, div#products-post-wrapper's width is 8800px.
Simple, with CSS:
iframe{
width: 100%;
max-width: 800px /*this can be anything you wish, to show, as default size*/
}
Please, note: But it won't make the content inside it responsive!
2nd EDIT:: There are two types of responsive iframes, depending on their inner content:
one that is when the inside of the iframe only contains a video or an image or many vertically positioned, for which the above two-rows of CSS code is almost completely enough, and the aspect ratio has meaning...
and the other is the:
contact/registration form type of content, where not the aspect ratio do we have to keep, but to prevent the scrollbar from appearing, and the content under-flowing the container. On mobile you don't see the scrollbar, you just scroll until you see the content (of the iframe). Of course you give it at least some kind of height, to make the content height adapt to the vertical space occurring on a narrower screen - with media queries, like, for example:
#media (max-width: 640px){
iframe{
height: 1200px /*whatever you need, to make the scrollbar hide on testing, and the content of the iframe reveal (on mobile/phone or other target devices) */
}
}
#media (max-width: 420px){
iframe{
height: 1600px /*and so on until and as needed */
}
}
I noticed that leowebdev's post did seem to work on my end, however, it did knock out two elements of the site that I am trying to make: the scrolling and the footer.
The scrolling I got back by adding a
scrolling="yes"
To the iframe embed code.
I am not sure if the footer is automatically knocked out because of the responsiveness or not, but hopefully someone else knows that answer.
Remove iframe height and width specified in pixels and use percentage
iframe{ max-width: 100%;}
<div class="wrap>
<iframe src="../path"></iframe>
</div>
.wrap {
overflow: auto;
}
iframe, object, embed {
min-height: 100%;
min-width: 100%;
overflow: auto;
}
it solved me by adjusting code from #Connor Cushion Mulhall by
iframe, object, embed {
width: 100%;
display: block !important;
}
If you happen to be using the Bootstrap CSS library, you can use the responsive embed classes that it provides:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
Several different aspect ratios are supported, see the documentation.
With the following markup:
<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>
The following CSS makes the video full-width and 16:9:
.video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
}
.video > .video__iframe {
position: absolute;
width: 100%;
height: 100%;
border: none;
}
}
I am search more about this topic and finally get a nice answer.
You can try like this:
.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
<div class="wrapper">
<div class="container">
<iframe src="there is path of your iframe"></iframe>
</div>
</div>
The best solution to make an "iframe" responsive and fit with all device screens , simply apply this code (working great with Games sites):
iframe::-webkit-scrollbar{display:none}
.iframe{background:#fff;overflow:hidden}
.iframe iframe{width:100%;height:540px;border:0;display:block}
.iframe-content{position:absolute;width:100%;height:540px;overflow:auto;top:0;bottom:0;-webkit-overflow-scrolling:touch}
#media screen and (max-width:992px){.iframe iframe{height:720px}}
#media screen and (max-width:768px){.iframe iframe{height:720px}}
#media screen and (max-width:720px){.iframe iframe{height:720px}}
#media screen and (max-width:479px){.iframe iframe{height:480px}}
#media screen and (max-height:400px){.iframe iframe{height:360px}}
If you're looking for a responsive games container fit with all devices apply this code which uses advanced CSS #media queries.
Fully responsive iFrame for situations where aspect ratio is unknown and content in the iFrame is fully responsive.
None of the above solutions worked for my need, which was to create a fully responsive iFrame that had fully responsive dynamic content inside of it. Maintaining any kind of aspect ratio was not an option.
Get height of your navigation bar and any content ABOVE or BELOW the iFrame. In my case I only needed to subtract the top navbar and I wanted the iFrame to fill all the way down to the bottom of the screen.
Code:
function getWindowHeight() {
console.log('Get Window Height Called')
var currentWindowHeight = $(window).height()
var iFrame = document.getElementById("myframe")
var frameHeight = currentWindowHeight - 95
iFrame.height = frameHeight;
}
//Timeout to prevent function from repeatedly firing
var doit;
window.onresize = function(){
clearTimeout(doit);
doit = setTimeout(resizedw, 100);
};
I also created a timeout so that on resize the function wouldn't get called a million times.
The code below will make the fixed width content of a non-responsive website within an iframe resize to the viewport width, only if its width is larger than the viewport width. For demo purposes the website is a single image 800 pixels wide. You can test by resizing your browser window or load the page in your phone:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
iframe {width: 100%; transform-origin: left top;}
.imgbox{text-align:center;display:block;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
jQuery(document).ready(function($){
nsZoomZoom();
$(window).resize(function(){
nsZoomZoom();
});
function nsZoomZoom(){
htmlWidth = $('html').innerWidth();
iframeWidth = 800;
if (htmlWidth > iframeWidth)
scale = 1;
else {
scale = htmlWidth / (iframeWidth);
}
$("iframe").css('transform', 'scale(' + scale + ')');
$("iframe").css('width', '800');
}
});
</script>
</head>
<body>
<div class=imgbox>
<iframe src="http://placekitten.com/g/800/600" scrolling=no width=800 height=600 frameborder=no></iframe>
</div>
</body>
If you are using bootstrap 4 then just use utility class for embed
https://getbootstrap.com/docs/4.5/utilities/embed/
Example:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Xh3j915ZnCo?rel=0" allowfullscreen></iframe>
</div>
For Example:
<div class="intrinsic-container">
<iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
CSS
.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%;
}
I had to show iframe in square so thats what i used
.video-wrapper {
position: relative;
padding-bottom: 100%;
}
.video-wrapper iframe {
position: absolute;
width: 100%;
height: 100%;
border: none;
}
Check out this full code. you can use the containers in percentages like below code:
<html>
<head>
<title>How to make Iframe Responsive</title>
<style>
html,body {height:100%;}
.wrapper {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src=""/>
<iframe src="http://www.sanwebcorner.com" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
</body>
</html>
I am trying to center a block of dynamic height. I followed the nice guide at Vanseo Design and implemented the solution with negative margins. After a while of tweaking I got it to work in Chrome, but when trying in IE and Firefox the negative margins were way off! Chrome and Safari handles the position as expected, but not IE and FF. Had it been only IE I could have done a classic IE-CSS-hack, but with Firefox in the mix as well... Anyone who know how to get vertical cenetring with dynamic element to work in all browsers?
Screenshot from Chrome / Safari (Correct):
Screenshot from Firefox / IE (Wrong):
<!DOCTYPE html>
<html>
<head>
<title>Dead Centre</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-color: #000;
margin: 0px
}
#content
{
position: absolute;
top: 50%;
left: 0%;
height: 64%;
width: 100%;
margin-top: -32%;
text-align:center;
background-color:#339;
}
--></style>
</head>
<body>
<div id="content">
<div class="bodytext">This box should be centered vertically</div>
</div>
</body>
</html>
Well, you put a height of 64% for your element, so let do mats :)
100-68 = 36 ,., so there is only 36% left.
then devide this by 2 and you have 18
By putting your content ID to 18% from top and removing your margin, everything should work just fine. :)
#content
{
position: absolute;
top: 18%;
left: 0%;
height: 64%;
width: 100%;
text-align:center;
background-color:#339;
}