All geek questions in one place

How can I get a div at 73px and an iframe at 100% on one page?

It should be easy, but I spent some time trying to figure it out ... I have a 73 pixel div. I also have an iframe that supposedly stretches to the rest of the page, but it overflows, and I have two scroll bars (Iframe and page). How can I get a div above an iframe and have the iframe at 100% height? I also tried negative margin and padding, and it did nothing.

Trying to get rid of the page scrollbar when using 100% and above: 73, but you can see the code for yourself.

+6
source share
7 answers

I find this interesting problem, so I spent some time debugging the design on your page.

Now for me, the text field always stretches exactly to the bottom of the page, and not further, and the page scroll bar does not appear.

Here are the changes (I hope you didn't change your code or style sheets too much when debugging):

1.) - "container" div:

Using bottom: 0 along with position: absolute ensures that the div stretches to the end of the page. Using height: 100% will overflow the div! Using overflow: hidden does not allow displaying the scroll bar of the page.

 <div class="container" style="position: absolute; top: 73px; bottom: 0; overflow: hidden; left: 50%; margin-left: -475px;">

2.) - Left panel ("span-12" div):

 <div class="span-12" style="float: left; padding-top: 17px; width: 470px">

3.) - Right panel ("span-12 last" div):

You can use the same trick as with the "container", div: absolute positioning and using the properties of the top, right and bottom CSS.

  <div class="span-12 last" id="friend_pane" style="position: absolute; top: 0; right: 0; bottom: 0">

4.) - And iframe:

 <iframe src="/friend/shell.php" frameBorder="0" allowTransparency="true" style="height: 100%; width: 100%">

EDIT - to center alignment, I added "left: 50%, left-margin: -475px;" in the style of the container div. These tricks belong to @clairesuzy, I myself have not found it.

+2
source

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>
+2
source

You can use the div wrapper in the iframe to indicate where you want the sides to be ( top:73px; left:0; right:0; bottom:0; ) with 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

+2
source

A bit complicated ... and most of the solutions work fine for the main part, but IE7 doesn’t like it if the iframe set to 100% high, without it the parent with an explicit height (in pixels, not percentages) - so my solution is to fully position the container to get the top and bottom coordinates of 73px that you need - then it should be as simple as setting the div #friend_pane to 100% height and then the iframe to 100% .. but that bit IE7 doesn't like. . therefore adding position: absolute; right: 0; position: absolute; right: 0; also in the friend_pane div, as well as 100% height - then IE7 applies 100% height to the iframe too.

Is there a leak (small?) If this is what you talked about in your comments, i.e. with the iframes natural model, but I found setting a negative -4px negative bottom field in iframe counteracts that

So, with your code; remove all inline styles from .container #friend_pane and iframe #friendpane_area

and add the following 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 is a demonstration of this with your page code:

JSBin HERE

Note: overflow:hidden; on the #friend_pane div instead of the negative 4px edge on the iframe will also cure the "leak"

and keep the generic code in the answer .. 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 up?<br/></font> SOCIAL POINTS&nbsp;&nbsp;<font color="#000000">0 Points</font><br/> ACCOUNT STATUS&nbsp;&nbsp;<font color="#2C8231">No Problems Found</font><br/> CONNECTBOX&nbsp;&nbsp;<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...&nbsp; <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

+2
source

You can wrap the iframe in a div and set the div position:fixed using top:73px and then set the right , bottom and left to 0 so that the div fills the remaining space below your 73px. After setting your wrapper, you can specify the height and width up 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;}
+1
source

Here is an example. The only way I was able to hide the scrollbar was to set the iframe html overflow hidden property. 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; }
0
source

It seems like the iframe is considered as an absolutely positioned element, do you really specify this in css. If the container is fully located, it should fill the container with a width of: 100% and a height: 100%.

In other words, if my theory is correct, the iframe does not correctly determine the size because it is looking for a positional (i.e. relative, absolute, not static) parent element. We need to figure out how to adjust its size, and the nearest abs element is the browser viewing area itself. A screen height of 100% usually fills the height of the screen, but the iframe is positioned down 73 pixels, making it overflow by 73 pixels.

Play with this a bit, it should be a good 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>
0
source

Source: https://habr.com/ru/post/890272/

More articles:


All Articles