I'm currently using a an iframe inside the modal to display some information. However, this iframe refuses to take the full height and width of its container.
Here is what I have now:
This first bit of code is the CSS for the modal the iframe is inside of
.uiModalContent {
background: #ffffff;
width: 900px;
height: 550px;
position: relative;
overflow: auto;
padding: 20px;
border: #222222 1px solid;
}
This is what the iframe has
<iframe id="ifrmEmail" class="resizeableIframe" name="ifrmEmail" scrolling="no" frameborder="0" height="242" width="100%"></iframe>
I've changed the height and width to 100% however when I do so, the uiModalContent gets a scroll bar which isnt ideal. Does anybody know a work around?
Simply remove the padding you have for .uiModalContent, or set it to 0.
Fiddle.
give Position: absolute;, Width and height to 100%,
.uiModalContent {
background: #ffffff;
width: 100%;
height: 100%;
position: absolute;
overflow: auto;
padding: 0;
border: #222222 1px solid;
}
Related
I need to create a page where I have 2 iframes next to each other with 100% height.
The left frame needs to have a fixed width of 140px and the right one needs to take the width of the rest of the screen. Keep in mind that both frames need to have 100% height.
Since there are different size screens I can't set a fixed with on the right iframe as I want it to take all the screen after the first 140px;
I kinds got it to work while using precentage. But the problem with percentage is the the left menu sometime show very wide
I created a fiddle to show you what I have done so far
http://jsfiddle.net/mwg3j17d/16/
#main_block {
display: block;
width: 100% height: 100%;
}
#left_frame {
width: 25%;
}
#right_frame {
width: 75%;
}
#left_frame,
#right_frame {
float: left;
}
iframe {
box-sizing: border-box;
}
.b_footer {
padding: 10px;
width: 100%;
background-color: blue;
text-align: center;
color: white: font-weight: bold;
}
<div id="main_block">
<iframe id="left_frame" src=""></iframe>
<iframe id="right_frame" src=""></iframe>
</div>
<div class="b_footer">
Footer
</div>
As you can tell, there are couple of problems with my code.
The footer background's color for some reason is also showing where under the iframs.
The second problem is that I am using 25% width for the left iframe where it should be set to 140px
Finally, the height of the iframe is not taking the entire height of the screen.
How can I correct the problems mention above?
EDITED
I also tried to use Table to get the job done but the left iframe does not have the correct width. Here is an updated Fiddle to show you
http://jsfiddle.net/mwg3j17d/19/
You can use width: calc(100% - 140px) to create your right column. Also, your .b_footer style was too large (10px padding + 100% + 10px padding) because you didn't specify box-sizing: border-box, so I added it.
Using float takes the elements out of the normal html flow, and has
odd side effects if you don't fully understand them. Use
display:inline block instead.
Use width: calc(100% - 140px) to create your right column.
Use 100vh for the height instead of 100%;
You will have issues with the footer because again, 100% + whatever the footer size is always going to be larger than the page height. Easiest solution is to fix the size of the footer, and use that in a height calculation.
I've added html,body { margin:0; padding:0; } to remove the margins and padding. If you want them, add them back manually so that all browsers will use the same values, and use the new values in your width/height calcs.
html,body { margin:0; padding: 0; }
#main_block {
display: block; /* Useless, divs are display:block */
width: 100%; /* Useless, display:block elements are width:100% by default */
height: 100%; /* Fairly useless now, should take children's height */
font-size:0; /* Force space between inline-block elements to be 0 */
}
#left_frame {
width: 140px;
}
#right_frame {
width: calc(100% - 140px);
}
#left_frame,#right_frame {
display: inline-block;
box-sizing: border-box;
height: calc(100vh - 50px);
}
.b_footer {
padding: 10px;
height: 50px;
background-color: blue;
text-align: center;
color: white;
font-weight: bold;
box-sizing: border-box;
}
<div id="main_block">
<iframe id="left_frame" src=""></iframe>
<iframe id="right_frame" src=""></iframe>
</div>
<div class="b_footer">
Footer
</div>
To display them next to eachother, there are several options, in this case, the easiest seems (to me, opinions differ), to add float:left; to both frames.
As for the problem with the frames not taking the full height, for this you can use height:100vh which means, 100% of the viewport height.
As for the footer being behind the iframes as well as under them this is fixed by forcing the footer to float at the bottom of the page at all times. This can be done by using position:absolute and bottom:0 as well as left:0
As for the width having to be 140px, calc(100vw-140px) will do nicely here
Your updated code
HTML
<div id="main_block">
<iframe src="http://www.w3schools.com" id="left_frame" src=""></iframe>
<iframe src="http://www.w3schools.com" id="right_frame" src=""></iframe>
</div>
<div class="b_footer">
Footer
</div>
CSS
html,
body {
margin: 0;
padding: 0;
}
#main_block {
display: block;
width: 100vw;
min-height: 100%;
}
#left_frame {
width: 140px;
}
#right_frame {
width: -moz-calc(100% - 140px); width: -webkit-calc(100% - 140px); width: calc(100% - 140px);
}
#left_frame,
#right_frame {
float: left;
height:100vh;
}
iframe {
box-sizing: border-box;
}
.b_footer {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
top:100vh;
background-color:blue;
color:white;
text-align:center;
}
Updated Fiddle
Hope this helps!
If you're going to have multiple iFrames that basically fill up the entire page, why don't you go with frameset?
<frameset rows="*,100">
<frameset cols="140,*">
<frame src="left.htm">
<frame src="right.htm">
</frameset>
<frame src="footer.htm">
</frameset>
This circumvents all your problems at once.
I have two divs contained within a larger div as follows:
<div class="content-container">
<div id="content">
Bunch of text ... omitted
</div>
<div id="sidebar">
</div>
</div>
The css corresponding to these two are as follows (slightly edited for length):
#content {
margin: 0;
padding: 15px;
width: 720px;
height: 100%;
position: absolute;
left: 0;
border-left: solid;
overflow: auto;
}
#sidebar {
margin: 0;
padding: 15px;
width: 198px;
position: absolute;
right: 0;
height: 100%;
background-color: white;
border-style: solid;
}
.content-container {
position: relative;
width: 978px;
height: 1060px;
}
I have read that the width attribute does not include padding. When I load the page up in Chrome and inspect the elements, content has a width of 705, instead of the expect 720. However, sidebar has the correct width of 198px. Does anyone have an explanation?
Does anyone have an explanation?
It's because of the scrollbar (resulting from overflow: auto).
There are some cross-browser inconsistencies related to the scrollbar and how it is included in the width calculations. In Chrome and Safari, the width of the scrollbar isn't included in the content width, whereas in Firefox and IE, the width of the scrollbar is included in the content width.
In the jsFiddle example that you provided, you will notice that the content width is 717px in Chrome after removing the scrollbar. With the scrollbar, 15px will be subtracted from the content width (resulting in 702px).
try to clear any possible default margin or padding for the parent div:
.content-container {
margin:0px;
padding:0px;
}
I have a div element containing a videoWrapper. What I want it to do is to be able to auto resize when I make the broswer's screen smaller. It works with the width because I could set a % to it. But I had to set a fixed value for the pixels.
So right now it auto adjusts the width but not the height, it stays always the same.
Here is the css style I am using for the div
height: auto;
height: 700px;
width: 70%;
border-style: solid;
border-color: red;
Something like this should work
<div class="videoWrapper">
<iframe width="560" height="349" src="" frameborder="0" allowfullscreen></iframe>
</div>
.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%;
}
I could not use the attribute height: 100%, it just did not work. I used the attribute height: 70vh, that solved my problem. Thanks anyway.
I created a position: fixed div, which must be always on the top, with width: 900px, now I have the following problem, when I resize the browser window to a size least than 900px my div is cropped and i can't even scroll it because the scroll bar doesnt appear.
How can I resolve?
The code is the following:
<body>
<div class= "bar"><div class="inner_div"></div></div>
</body>
Now the css
.bar { position: fixed;
height: 60px; width: 900px; border: 2px solid;
}
.inner_div {position: absolute; right: 5px; top: 2px; border: 2px solid; width: 100px; height: 15px;}
Trying this code you'll see that if your browser window gets less than 900px the bar is cropped and there isn't way to scroll it and to see the inner_div.
I'm pretty sure some browsers only use non-fixed elements to determine the width of your content. Adding something like this at the bottom of your page should get you your scroll bar <div style="width:900px;"></div>
Previously I didn't mention that the spacing div can't be empty or has to have a height, so adding a non-breaking space or a 1px height to it will make it fill the width.
Full Code Example:http://jsfiddle.net/8LnBr/
<style>
.bar { position: fixed; height: 60px; width: 900px; border: 2px solid; }
.inner_div {position: absolute; right: 5px; top: 2px; border: 2px solid; width: 100px; height: 15px;}
.spanner{width:900px; height:1px;}
</style>
<body>
<div class= "bar">
<div class="inner_div"></div>
</div>
<div class="spanner"></div>
</body>
This should be easy, but I've spent a while trying to figure this out... I have a div that is 73px in height. I also have an Iframe that is suppose to stretch to the rest of the page but it overflows and I have two scroll bars (Iframe, and page). How can I have the div above the Iframe and have the Iframe in 100% height? I've also tried a negative margin and padding and that hasn't done anything.
Trying to get rid of the page scroll bar when using 100% and top: 73, but you can see the code for yourself.
I find this an interesting problem, so I've spent some time debugging the design on your page.
Now for me, the textarea always stretch exactly to the bottom of the page, not farther, and the page scrollbar does not appear.
Here are the modifications (I hope you did not change your code or stylesheets too much while I was debugging):
1.) - The "container" div:
Using bottom: 0 together with position: absolute ensures that the div stretch to the end of the page. Using height: 100% would cause the div to overflow! Using overflow: hidden does not allow the page scrollbar to show up.
<div class="container" style="position: absolute; top: 73px; bottom: 0; overflow: hidden; left: 50%; margin-left: -475px;">
2.) - The left pane ("span-12" div):
<div class="span-12" style="float: left; padding-top: 17px; width: 470px">
3.) - The right pane ("span-12 last" div):
You can use the same trick as with the "container"
div: absolute positioning and use of the top, right and bottom css properties.
<div class="span-12 last" id="friend_pane" style="position: absolute; top: 0; right: 0; bottom: 0">
4.) - And the iframe:
<iframe src="/friend/shell.php" frameBorder="0" allowTransparency="true" style="height: 100%; width: 100%">
EDIT - To make it center-aligned, I added "left: 50%; left-margin: -475px;" in the style of the "container" div. This tricks belongs to #clairesuzy, I didn't find it myself.
http://jsfiddle.net/HZTTp/:
<!doctype html>
<html>
<head>
<title></title>
<style>
html,
body {
margin: 0;
overflow: hidden;
}
body {
padding: 0 !important;
padding: 30px 0 0;
}
#top {
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 100%;
overflow: hidden;
background: gray;
}
html
>
body
#bot {
position: absolute;
top: 30px;
bottom: 0;
width: 100%;
}
object {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="bot">
<object data="foo"></object>
</div>
</body>
</html>
You can use a wrapper div on the iframe to specify where you want it's sides to be (top:73px; left:0; right:0; bottom:0;) with the help of position:absolute.
HTML:
<div id="head"></div>
<div id="main">
<iframe src="http://i.reddit.com/"></iframe>
</div>
CSS:
body { margin:0; padding:0; }
#head { height:73px; background:#c33; }
#main { top:73px; left:0; right:0; bottom:0; position:absolute; }
#main iframe { border:0; width:100%; height:100%; display:block; }
Demo: jsfiddle.net/fErZY
A bit tricky.. and most solutions work OK for the main part but IE7 doesn't like when a iframe is set to 100% tall without it's parent having an explicit height (in px, not percent) - so my solution is to absolutely position the container so you get the 73px top and 0 bottom co-ordinate you need - then it should be as simple as setting the #friend_pane div to 100% height, and then subsequently the iframe to 100%.. but that's the bit IE7 doesn't like.. so adding position: absolute; right: 0; also to the friend_pane div, along with the 100% height - then makes IE7 apply the 100% height to the iframe too.
There is leakage (small?), if that's what you've been referring to in your comments, that is to do with the iframes natural box model, but I found setting a negative bottom margin -4px on the iframe counteracts that
So with your code; remove all inline styles from .container #friend_pane and the iframe #friendpane_area
and add these styles:
.container {
position: absolute;
top: 73px;
bottom: 0;
left: 50%;
margin-left: -475px;
background: #cff; /* for testing only */
}
#friend_pane {
position: absolute;
right: 0;
height: 100%;
background: #fcf; /* for testing only */
}
#friend_pane iframe {
border: 0;
padding: 0;
margin: 0;
width: 470px;
height: 100%;
margin-bottom: -4px;
}
Here's a demo of this with your page code:
JSBin HERE
Note: overflow:hidden; on the #friend_pane div instead of the negative 4px margin on the iframe will also cure the "leakage"
and to keep some general code in the answer.. a simplified demo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FriendsConnect | My dashboard</title>
<style type="text/css" media="screen">
body {
background-color: #4DA2CA;
margin: 0px;
padding: 0px;
}
#mainbar {
background-image: url('http://friendsconnect.org/bar_fade.png');
background-repeat: repeat-x;
background-color: #494949;
padding-top: 6px;
height: 67px;
}
#infobox_left {
color: #444444;
margin-bottom: 15px;
padding: 15px;
background-image: url('http://friendsconnect.org/grp2.png');
background-color: #F2F2F2;
background-repeat: repeat-x;
float: left;
width: 440px;
}
#com-status {
border: solid 1px;
border-color: #3B7D99;
background-color: #4794B7;
padding: 15px;
float: left;
clear: left;
width: 440px;
}
.container {
position: absolute;
width: 950px;
top: 73px;
bottom: 0;
left: 50%;
margin-left: -475px;
background: #cff; /* for testing only */
}
#friend_pane {
position: absolute;
top: 0;
right: 0;
height: 100%;
background: #fcf; /* for testing only */
}
#friend_pane iframe {
border: 0;
padding: 0;
margin: 0;
width: 470px;
height: 100%;
margin-bottom: -4px;
}
</style>
</head>
<body>
<div align="left" id="mainbar">Main bar</div>
<div class="container">
<div style="padding-top: 17px;" class="span-12">
<div id="infobox_left">
<font color="#000000">Welcome TEST, what's up?<br/></font>
SOCIAL POINTS <font color="#000000">0 Points</font><br/>
ACCOUNT STATUS <font color="#2C8231">No Problems Found</font><br/>
CONNECTBOX <font color="#000000">0 New Messages</font>
</div>
<div id="com-status">
<strong>Pete Allport commented on your status</strong><br/>Pete Allport Commented: Yeah bro thats beastt...
<div style="float: right;"><button>Close</button></div>
</div>
</div>
<div id="friend_pane">
<iframe id="friendpane_area" src="http://google.com" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
</body>
</html>
which you can see:
JSBin Here
You can wrap your iframe in a div and set the div's position:fixed with top:73px then right, bottom, and left set to 0 so the div fills remaining space below your 73px header. Once your wrapper is set you can specify height and width to 100% for your iframe.
example: http://jsfiddle.net/pxfunc/KTwxb/
HTML:
<div id="header">Header</div>
<div id="wrapper">
<iframe id="frame" src="http://www.supercalifragilisticexpialidocious.com/"></iframe>
</div>
CSS:
html, body {margin:0;padding:0;height:100%;font-family:helvetica,arial,sans-serif;}
#header {width:100%;height:73px;}
#wrapper {position:fixed;top:73px;right:0;bottom:0;left:0;}
#frame {width:100%;height:100%;border:0;}
Here is an example. Only way I was able to hide the scroll bar was to set the iframe's html overflow property to hidden.
http://jsfiddle.net/nERqu/
HTML:
<div class="top">
<p>div text</p>
</div>
<iframe class="iframeBottom" src="http://www.google.com">
</iframe>
CSS:
.iframeBottom {
height: 100%;
width: 100%;
position: absolute;
scrolling: no;
}
.top {
height: 73px;
width: 100%;
background-color: yellow;
position: absolute;
z-index: 999;
}
It seems like iframe is being treated as an absolutely positioned element whether or not you actually specify that in the css. If its container is absolutely positioned, it should be able to fill the container using width:100% and height:100%.
In other words, if my theory is correct, the iframe isn't sizing "correctly" because it is searching for a positioned (i.e. relative, absolute, just not static) parent element. It needs to figure out how to adjust its size and the closest abs pos element is the browser viewing area itself. 100% height of the screen would normally fill the screen height, but the iframe is positioned down 73px, thus making it overflow by 73px.
Play with this a bit, it should be a nice step in the right direction:
<div style="position:absolute; width: 515px; top:73px; bottom:0px; right:0px;">
<iframe id="friendpane_area" style="position:absolute; width:100%; height: 100%;" src="./FriendsConnect My dashboard_files/shell.htm" frameborder="0" allowtransparency="true"></iframe>
</div>