Как я могу иметь div на 73px и iframe на 100% на той же странице? - PullRequest
Новая
       1

Как я могу иметь div на 73px и iframe на 100% на той же странице?

6 голосов
/ 11 июня 2011

Это должно быть легко, но я потратил некоторое время, пытаясь выяснить это ... У меня есть div, высота которого составляет 73px. У меня также есть Iframe, который должен простираться до остальной части страницы, но он переполняется, и у меня есть две полосы прокрутки (Iframe и страница). Как я могу иметь div над Iframe и иметь Iframe на 100% высоты? Я также пробовал использовать отрицательное поле и отступы, но ничего не сделал.

Попытка избавиться от полосы прокрутки страницы при использовании 100% и top: 73, но вы можете увидеть код для себя.

Ответы [ 7 ]

2 голосов
/ 15 июня 2011

Мне кажется, это интересная проблема, поэтому я потратил некоторое время на отладку дизайна на вашей странице.

Теперь для меня текстовая область всегда растягивается точно до нижней части страницы, а не дальше, и полоса прокрутки страницы не появляется.

Вот изменения (надеюсь, вы не слишком меняли свой код или таблицы стилей во время отладки):

1.) - Div "контейнер":

Использование bottom: 0 вместе с position: absolute гарантирует, что div будет растягиваться до конца страницы. Использование height: 100% приведет к переполнению div! Использование overflow: hidden не позволяет отображать полосу прокрутки страницы. 

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

2.) - Левая панель (div "span-12"): 

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

3.) - Правая панель («span-12 last» div):

Вы можете использовать тот же трюк, что и с «контейнером» div: абсолютное позиционирование и использование свойств top, right и bottom css. 

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

4.) - И фрейм: 

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

РЕДАКТИРОВАТЬ - чтобы выровнять его по центру, я добавил «left: 50%; left-margin: -475px;» в стиле "контейнер" div. Этот трюк принадлежит @clairesuzy, я сам его не нашел.

2 голосов
/ 17 июня 2011

Немного сложно ... и большинство решений работают нормально для основной части, но IE7 не нравится, когда iframe имеет высоту 100%, если его родитель не имеет явной высоты (в пикселях, а не в процентах) - такМое решение состоит в том, чтобы абсолютно точно позиционировать container, чтобы вы получили необходимую верхнюю и нулевую координаты 73px - тогда это должно быть так же просто, как установить #friend_pane div на 100% высоты, а затем iframeдо 100% ... но это то, что IE7 не нравится ... поэтому добавление position: absolute; right: 0; также к разделу friend_pane вместе с высотой 100% - тогда IE7 также применяет высоту 100% к iframe.

Существует утечка (малая?), Если вы это имели в виду в своих комментариях, это связано с естественной рамочной моделью iframes, но я обнаружил установку отрицательного нижнего поля -4px наiframe противодействует этому

То же самое с вашим кодом;удалите все встроенные стили из .container #friend_pane и iframe #friendpane_area

и добавьте эти стили: 

.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;
}

Вот демонстрация этого с кодом вашей страницы:

JSBin ЗДЕСЬ

Примечание: overflow:hidden; на #friend_pane div вместо отрицательного поля в 4px на iframeтакже вылечит "утечку"

и сохранит некоторый общий код в ответе .. упрощенную демонстрацию 

<!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&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>

, которую вы можете увидеть:

JSBin Here

2 голосов
/ 11 июня 2011

С помощью position:absolute.

HTML: * вы можете использовать оболочку div на iframe, чтобы указать, где вы хотите, чтобы его стороны были (top:73px; left:0; right:0; bottom:0;).1008 *

<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; }

Демонстрация: jsfiddle.net / fErZY

2 голосов
/ 11 июня 2011

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>
1 голос
/ 11 июня 2011

Вы можете обернуть свои iframe в div и установить div'ы position:fixed с помощью top:73px, затем right, bottom и left, установленными в 0, так что div заполняет оставшееся пространство ниже вашего Заголовок 73px. После того, как ваша обёртка установлена, вы можете указать высоту и ширину в 100% для вашего iframe.

пример: 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;}
0 голосов
/ 15 июня 2011

Кажется, что iframe рассматривается как абсолютно позиционированный элемент, независимо от того, указали ли вы это на самом деле в CSS.Если его контейнер абсолютно позиционирован, он должен быть в состоянии заполнить контейнер, используя ширину: 100% и высоту: 100%.

Другими словами, если моя теория верна, iframe не изменяет размеры "правильно"потому что он ищет позиционный (т.е. относительный, абсолютный, просто не статический) родительский элемент.Нужно выяснить, как настроить его размер, и ближайший элемент abs pos - это сама область просмотра браузера.Высота экрана в 100% обычно заполняет высоту экрана, но iframe располагается на 73px, что делает его переполненным на 73px.

Поиграйте с этим немного, это должен быть хороший шаг в правильном направлении.: 

<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 голосов
/ 11 июня 2011

Вот пример. Единственный способ, которым я смог скрыть полосу прокрутки, - установить свойство переполнения html в iframe как скрытое. 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;
}
...