Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I have a div at 73px and an iframe at 100% on the same page?

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.

like image 672
John Doe Avatar asked Jun 11 '11 02:06

John Doe


2 Answers

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.

like image 130
Luc125 Avatar answered Oct 13 '22 19:10

Luc125


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>
like image 21
reisio Avatar answered Oct 13 '22 21:10

reisio