I'm currently trying to have an iframe fit the size of my screen, and any other user using it at different resolutions, except no matter what I try I'll either end up with the iframe being too small or the height being too large causing a double scroll bar. (The iframe and the page itself having scroll bars).
My objective is having the iframe fit only 85% width of the page (which works!), 100px from the top of the screen (also works), and then for the bottom to fit the edge of the bottom of my browser (that's where I'm stuck...)
HTML
<div id="maindiv" class="maindiv">
<iframe id="theiframe" class="iframeautowidth" seamless src="http://whateverdomain.com></iframe>
</div>
CSS:
.maindiv {
width: 85%;
top: 100px;
}
.iframeautowidth {
left: 0px;
top: 0px;
bottom: 0px;
width: 85%;
height: 100%;
border: 0
overflow: hidden;
display: block;
margin: 0;
float: left;
}
If it counts for anything, I have the latest jquery running on my page if it'll help. Thanks in advance!
Use the onload() event of your iframe and the onresize() event of the window to resize the iframe to the required size.
This Microsoft Support article explains it well.
FYI, in javascript screen.width & screen.height will give you the screen resolution.
If you had Fx4, a simple height: -moz-calc(100%-100px) would work a wonder. A pity this feature is introduced and supported so late in CSS3.
If the 100px top is for tabs navigating the iframe, there may be a workaround. Just fill up your iframe to 100% height and then put those tabs inside the iframes as another iframe with a fixed size. Or just resort to frameset.
Whether this works for you or not depends on your exact design, but hope that helps.
Related
I'm making a patatap.com website clone for learning purposes. I want the site to take exactly 100% of the available screen height. There is no more content so no scrolling is needed. I'm using the 100vh CSS property for this:
body, html {
max-height: 100vh;
margin: 0;
}
This is the current version of the website:
http://patatap-clone.hexagonwebdev.vxm.pl/ (press any letter or number on keyboard to use it's functionality).
It is OK on Windows 7 on Internet Explorer and Firefox, but on Chrome (latest version - 70.0.3538.102) the site takes more than full screen and I can scroll down a bit.
It is bad on Ubuntu - on Chromium and Firefox around 30% of site is not visible (this laptop has smaller resolution).
Is there a better way to achieve the "non-scrolling" and 100% height goal? I have tried max-height: 100% and !important properties but that did not help.
Content will force just about anything to get bigger if you haven't set overflow properties. Conversely, setting max-height doesn't make the content bigger so the height will be the content height up to the max-height.
Finally, try not to set the height of the body/html tags. Those are "special" tags that don't function the same way other elements do.
Instead, create a container that is the full size of the screen.
/* normal div */
.container {
display:block;
height: 100vh;
overflow:hidden;
background: black;
}
/* or absolutely positioned div */
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow:hidden;
background: black;
}
Is it possible to change the height of an HTML element when the viewport resizes with pure CSS? It's hard to explain the problem, but I'm still going to try:
What I want, is a page with a header, content and a footer, like most webpages. As I'm working with a 1920x1080 monitor, I'm using that as my standard. The problem however is that not everyone is using a 1080p monitor. Some are using the older standard, 1280x1024 or using a tablet where the height can be 2560px (I'm not doing smartphones, as they will have a completely different design due to the small screen width). On my page I have images, covering a fixed width. If this width is greater than the width of the viewport, the images will be displayed underneath each other:
(Right-click on the image and select "show image" to view at full size)
As you can see in this image, when the viewport is smaller, the images will stack and will fall from the background. The 'Follow me on:' section even felt of entirely. What I want to do is, when this happens, to make the content div larger, so all of the content stays on the page. I know this is possible using height: auto, but when you do that, the fixed height of the footer will follow after it, and on a screen with a large height, there might be a white border because the document height is smaller than the viewport height.
Take some time to learn min-width, min-height, max-width, max-height, (css attributes) and device-width, device-height (css default values of the client viewports). I can not guarantee they would refresh while you drag/resize the browser window or viewports in devices, but I think they help your style rules.
It's slightly unclear to me what your end-goal is with this so I did my best interpretation. If it's not what you're looking for, give me a good mental image of what you're trying to do and I'll try to correct it.
Live Demo
CSS:
html, body {
box-sizing: border-box;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#wrap {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
}
#header, #content, #footer {
position: absolute;
width: 100%;
}
#header {
top: 0;
height: 70px;
background: lightblue;
}
#content {
overflow-y: auto;
top: 70px;
bottom: 70px;
background: limegreen;
}
#footer {
bottom: 0;
height: 70px;
background: purple;
}
HTML:
<div id="wrap">
<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
This is a tricky question to word correctly, so I created a Fiddle to more accurately represent what I'm trying to do:
http://jsfiddle.net/LAtPJ/
.thumbnailContainer.video_embed
{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.thumbnailContainer.video_embed iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The above code works perfectly for very nice, responsive YouTube videos. But...
If you imagine this in the context of a media gallery where images and videos should co-exist in a completely responsive design.
There will be rows and rows of media, and there is likely to be a difference in aspect ratio between the images and the videos and so therefore we're left with something that is no longer uniform.
Effectively, the YouTube video should be 100% wide, but it's height should be no taller and no shorter than that of the images. I previously had a version of this that was all fixed widths and heights so quite simply every image and every iframe was 200 x 200. Now, I want something more mobile friendly so although images I have exactly how I need them, videos are not.
Any ideas?
The end solution (if there is one) should preferably be CSS only and not necessarily specific to YouTube (some of the videos will be other services, but mostly rendered via an iframe like YouTube).
You guys are awesome so hopefully you'll come up with something cool. Thank you so much.
100% height is challenging, as you can see here: How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?
Your best bet might be to use jQuery, if that's an option.
You might try giving both the .thumbnailContainer and .thumbnailContainer.video_embed iframe classes a min- and max-height. This is untested on mobile, of course, and I'm not certain how aspect ratio would be affected for non-responsive video embeds. Hope this helps.
DEMO here. Code snippet below:
.thumbnailContainer
{
overflow: hidden;
position: relative;
width: 100%;
min-height: 200px;
max-height: 200px;
}
.thumbnailContainer.video_embed iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 200px;
max-height: 200px;
}
I thought it might be useful to document how I've decided to do this.
#ivarPrudnikov kindly suggested grabbing the YouTube thumbnails from the API. Something I had considered already, but, of course, it doesn't really matter whether the thumbnail container contains an iframe, text, or indeed an image, the same problem exists.
There's no straight forward way of keeping that container the same size as the other containers without there being an image in there of the exact aspect ratio.
There may be other ways... but I was beginning to feel they were too complicated, would be difficult to manage going forward and perhaps suffer from compatibility issues with certain browsers.
So, I've resorted to doing everything server side.
It's all written in PHP anyway, so I actually pass the YouTube video ID to a PHP script, fetch the thumbnail directly from YouTube and then I crop and resize it based on the desired thumbnail width. height and aspect ratio.
That all happens on the fly. I will more than likely implement some sort of basic caching mechanism whereby I actually save the image locally eventually.
Until then, problem solved and I thank you so much to everyone who too the time to answer and/or comment.
Much appreciated, always!
Chris
This is what I use. It sets the padding based on the embed width and height attribute and calculates the aspect ratio.
As long as you have 2 divs around the iframe (you can tweak for embed) and the width and height set as an attribute in the iframe, this will work.
jQuery(document).ready(function() {
jQuery('.embed-wrapper').each(function(){
dcembedheight = jQuery('iframe', this).attr( "height" );
dcembedwidth = jQuery('iframe', this).attr( "width" );
ratio = ((dcembedheight/dcembedwidth)*100).toPrecision(4) + '%';
jQuery(this).attr("style" , "max-width:"+ dcembedwidth + "px");
jQuery('.embed-container', this).css({"padding-bottom": ratio});
});
});
HTML - exclude embed-wrapper for 100% width and to only use the css in 16:9 ratio
<div class="embed-wrapper">
<div class="embed-container">
<iframe src="//giphy.com/embed/BVNbHPjIfSNOw" width="480" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>
CSS - notice that the padding is set by the jquery but the css contains default 16:9 ratio padding
.embed-container {
position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
I'm building a page where I have a two div's. One div is used as the header, and the other div contains an iFrame.
Currently, I have some JQuery and CSS working together in order to get resize the iFrame depending on the size of the window it's being viewed. I've done some initial testing, and it works on Firefox, Safari, Chrome, IE 9, and the default/stock browser on Android 2.3.
However, when I try to view the page on an iPad, iPhone or BlackBerry, it looks like the iFrame is resizing, but you are then unable to scroll the full length of the iFrame page. You're stuck basically. But on an Android phone, I am able to scroll down the page, which is strange.
Here is the CSS code I am using:
#header {
float: left;
width:100%;
height:75px;
background: #21a5d3; /* Old browsers */
}
#portal {
position: fixed;
top: 75px;
left: 0px;
width: 100%;
bottom: 0px;
min-width: 100%;
}
iframe#iframeclass { width: 100%; height:100% }
Here is the HTML:
<div id="header">
</div>
<div id="portal">
<iframe src="http://www.bbc.co.uk/" id="iframeclass" frameborder="0"></iframe>
</div>
And here is the JQuery I'm using:
<script>
var widthRatio = $('#portal').width() / $(window).width();
$(window).resize(function() {
$('#portal').css({width: $(window).width() * widthRatio});
});
</script>
After much Googling and trial and error, I've managed to bodge (not fix) the issue.
I have essentially removed the JQuery code that would give me a perfect Window size when loaded in any browser. And I changed the #portal code to the following:
#portal {
position: absolute;
top: 75px;
left: 0px;
height:92%;
width:100%;
bottom: 0px;
min-width: 100%;
-webkit-overflow-scrolling:touch;
}
I don't know if the -webkit-overflow-scrolling:touch; code actually does anything, but I'm that hacked off with it I really couldn't care less if it did now or not.
It's a problem that Apple has known about since 2011, but proceeds to further break support for this issue (not fix it). What an absolute joke.
I am simply trying to make a iFrame to show a website. The current iframe code that I have does in fact work, but I would like to make the iframe show 100% on the height and width. The current code shows the site 100% height, but not width, so can someone help me with this?
Here is the exact page so you can see what I am talking about:
http://dnatecservices.com/wp-demo/Untitled-2.html
Please view the page source to see my html. For some reason, I am unable to post the code here.
So can someone provide me with an HTML that will show this iframe both 100% on the height and width? I want the site to show on 100% of the user's screen.
After you remove the width:1000px; from the 'container' DIV you will want to remove the border from the iframe :
#iframe {
height: 100%;
width: 100%;
display: block;
border: 0px;
}
Your css code shows:
#container {
width: 1000px;
min-height: 550px;
position: relative;
}
remove the width here and it will show the Iframe with 100% width