I'm using the classic responsive design trick of applying a percentage based padding-bottom and zero height to an element in order to make it maintain a certain aspect ratio. Inside this element is an iframe with a height of 100%.
This works an intended in chrome, but firefox and IE doesn't show the iframe, as if it would have no height. I have tried applying box-sizing: content-box as a workaround for IE, but it did nothing.
Fiddle: http://jsfiddle.net/jgsnK/
How can I make the iframe behave like in chrome in the other browsers?
What you'll need to do is position your iframe using position:absolute; with position:relative; on your .wrapper
.wrapper {
position:relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
}
.frame {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
width: 100%;
height: 100%;
}
Have a look at this DEMO
FURTHER:
If you plan on doing something like this regularly throughout your document I would suggest adding an internal div that does this same function and leave your iframe without the absolute positioning
HTML
<div class="wrapper">
<div class="abs-inner">
<iframe border="0" scrolling="no" class="frame" src="http://images.fineartamerica.com/images-medium-large/7-abstract-background-les-cunliffe.jpg"></iframe>
</div>
</div>
CSS
.wrapper {
position:relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
}
.abs-inner{
position:absolue;
top:0;
right:0;
left:0;
bottom:0;
}
.frame {
width: 100%;
height: 100%;
}
Something like this DEMO
The height: 100%; means match the height of element with the height of its parent i.e. 0px. You can use relative + absolute positioning to achieve the desired result i.e. match the height with the height of the element plus padding:
.wrapper {
width: 100%;
padding-bottom: 56.25%;
position: relative;
}
.frame {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Demo here
Note: for pixel perfect results you might need to zero-out the marginwidth, marginheight and frameborder attributes on the iframe.
Related
I'm trying to make an iframe that will show the full page of the external site with a top div. The problem is all browsers are ignoring the width & height css.
This is what my css is
iframe {
position:fixed;
width:100%;
height:100%;
border:none;
margin:0;
padding:0;
overflow:hidden;
z-index:999999;}
When you view the site it ignores the width and height which makes iframe not full screen. When I view the source in the browser the width & height are missing. Any fix to this?
You can use vh and vw uits for that. 1vw is 1% of viewport width, and 1vh is 1% of viewport height:
iframe {
position:fixed;
width:100vw;
height:100vh;
border:none;
margin:0;
padding:0;
overflow:hidden;
z-index:999999;
}
By the way I looked at the site by link. It has a little broken style for iframe:
iframe {
position: fixed;
width: 100;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
}
width value has no units, height is absent.
Following code works:
iframe {
position: fixed;
width: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
height: 100%;
}
I have here plunkr which shows the issue I am facing.Basically I am trying to do create a scroll bar for middle div element, have all three div's fit inside the page.
This approach works fine if I use it as html page, but when I use it inside ui-view, the content inside '#content-scroll' does not show up, if I remove position:absolute from CSS, it displays, but doesn't display scroll bars.
Basically I just want to know how can I have the content display?
How can this be resolved?
http://plnkr.co/edit/ZkGafJ8cS6VG6lfS9SJY?p=preview
#content-scroll {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: auto;}
Here is the example of same page that works inside html
http://jsfiddle.net/sA5fD/8/
absolute positioned elements behave according to it's parents.
If we give bottom:0; top:0; to an absolutely positioned element it will select the bottom and top of it's parent. So:
Your previous example it is working since the parent have 100% height.
Inside ui-view it will not work it doesn't have an explicit height to it.
There's more than one solution to this problem. For example I applied a min-height to the parent #content and changed it's display property. I suppose you have #content only used for this scrollbar content. Othewise you have to apply special class to the element.
#content {
display:block;
height:100%;
background:#8f8;
min-height: 90vh;
}
Here's a plunker: http://plnkr.co/edit/5vl0AN3WwtUJmDiNtNdL?p=preview
I guess This would solve your problem.
html { height: 100%; }
body {
padding:0 0;
margin:0 0;
height: 100%;
}
#main {
display:table;
height:100%;
width:100%;
}
#header, #footer {
display:table-row;
background:#88f;
left:0;
right:0;
}
#content {
display:table-cell;
height:100vh;
background:#8f8;
}
#content-scroll-wrap {
position: relative;
height: 100%;
}
#content-scroll {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: auto;
}
I have a question.
I got this so far:
I basically want the highlighted div to cover your device screen no matter how big the device screen is. now i see 2 different divs when i open this on my phone. i only want to see the one that is highlighted. How do I achieve this?
Thanks in advance,
kevin
You could use viewport height as your height value:
.main {
height: 100vh;
background-color: green;
}
<div class="main">
CONTENT
</div>
Using height: 100vh means the element in question always be 100% height of the viewport a user / devie has.
More info: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
You can probably do that by setting the position of the div that you want to make fullscreen, to absoluteand then apply the below CSS.
top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;
Thus, the final css would be as follows
.fullscreen{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;
}
You can use position: absolute; or position: fixed.
Use absolute for just making it cover the whole page.
Use fixed to make it nailed in a default position. If u use fixed, even though your page is more than 100% you cannot scroll down to see any other things.
CSS
div.any {
position: absolute; /*position: fixed;*/
top: 0;
left: 0;
width: 100%;
height: 100%;
/*You can add anything else to this like image, background-color, etc.*/
}
HTML
<div class="any"></div>
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
object-fit: fill;
}
.video-container video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I've build an iframe that embed an html like the following:
<div class="document">
<iframe src="http://localhost:8080/doc625.htm">
</iframe>
</div>
While these are the classes that I've apply to the div and the iframe:
.document {
position: relative;
width: 100%;
height: 0;
padding-bottom: 50%;
padding-top: 50%;
overflow: hidden;
}
.document iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
The problem is that when I try to expand the screen, the height of the Iframe doesn't fit to their content.
How can I fix it?
These are the screenshots:
100% zoom
50% zoom
I have uploaded 2 pages one child (page2.html) the other parent (page1.html).
I added defaults I use frequently, but the major changes are as follows:
.document {
overflow-y: scroll;
}
.document iframe {
bottom: 0; right: 0;
}
You mean the height of the iframe doesn't follow ?
I think you shouldn't use all these properties, just set your iframe dimensions with viewport sizes, like "vh" for the height and "vw" for the width, and set it to "100vh" and "100vw" like :
iframe {
height:100vh;
width:100vw;
border:none;
}
I just want to have a sidebar that will be 100% of window height, but nothing works except this:
#sidebarBack {
background: rgba(20, 20, 20, .3);
position: fixed;
width: 250px;
height: 100%;
left: 0;
}
I don't want to have position: fixed, because I have horizontally scrollable content, so a fixed part would remain, well, fixed.
Is there any way to do such a thing, maybe with relative or absolute position?
Here's an quick Fiddle just for a test and explanation:
JSFiddle
You can use the new and so-useful-I-can't-imagine-what-took-W3C-so-long vh CSS unit:
height:100vh;
tl;dr - add html, body {height:100%;} to your CSS.
Percentage values in CSS are inherited from some ancestor that already has height declared. In your case, you need to tell all parents of your sidebar to be 100% height. I'm assuming that #sidebarBack is a direct child of body.
Essentially, your code above is telling #sidebarBack to be 100% height of its parent. Its parent (we are assuming) is body, so you need to set height: 100%; on body as well. We can't stop there, however; body inherits height from html, so we also need to set height: 100%; on html. We can stop here, because html inherits its properties from viewport, which already has a declared height of 100%.
This also means if you end up putting the #sidebar inside another div, then that div also needs height:100%;.
Here is an Updated JSFiddle.
Changed your CSS to:
html, body {
height:100%;
}
#sidebar {
background: rgba(20, 20, 20, .3);
width: 100px;
height: 100%;
left: 0;
float:left;
}
section#settings {
width:80%;
float:left;
margin-left:100px;
position:fixed;
}
First, tell the body element to fill the window, rather than shrinking to the size of the content:
body { position: absolute; min-height: 100%; }
by using min-height instead of height, body will be allowed to expand beyond the window's height when the content is longer than the window (i.e. this allows for vertical scrolling when needed).
Now, set your "#sidebar" to be position:absolute, and use top:0; bottom:0; to force it to fill the parent element's vertical space:
#sidebar {
position: absolute;
top:0; bottom:0;
left: 0;
width: 100px;
background: rgba(20, 20, 20, .3);
}
Here are a couple of jsFiddles:
with content shorter than the window
with content longer than the window
As you'll see, in both examples, I've preserved your width setting on the "#settings" section, thus showing that horizontal scrolling works as you requested.
Try the following
#sidebarBack {
background: rgba(20, 20, 20, .3);
position: fixed;
width: 250px;
top:0;
bottom:0;
left: 0;
}
Try this -
html,body{height:100%;}
#sidebar {
background: rgba(20, 20, 20, .3);
/*position: fixed;*/
width: 100px;
height: 100%;
left: 0;
float:left;
}
section#settings {
width: 62%;
height: auto;
display: inline-block;
position: relative;
margin-left: 100px;
float:left;
}