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

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

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


html padding css margin
person John Doe    schedule 11.06.2011    source источник
comment
Я лично использую jquery для расчета оставшейся суммы и назначения высоты для iframe, просто мысль ... вы также можете всегда учитывать 95%, это неприятно, но оно охватывает 95% ситуаций :)   -  person Ayyash    schedule 14.06.2011

Ответы (7)


arrow_upward
2
arrow_downward

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

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

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

1.) - Раздел "контейнер":

Использование 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.) - Левая панель (див "span-12"):

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

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

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

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

4.) - И iframe:

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

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

person Luc125    schedule 15.06.2011
comment
Это отлично сработало, за исключением того, что мой контейнер и два элемента div теперь выровнены по левой стороне страницы... есть идеи? Я обновил свой ответ изображением проблемы - person John Doe; 16.06.2011
comment
Извините, я не понял, что вы хотите, чтобы два элемента div были выровнены по центру. Вы можете установить поле (например, 20%), чтобы они не были так далеко слева, но это не то же самое, что масштабируемое выравнивание по центру, поэтому я собираюсь искать другое решение. - person Luc125; 16.06.2011
comment
Теперь я знаю, как сделать его выровненным по центру, спасибо @clairesuzy, я обновил свой пост. Также была небольшая синтаксическая ошибка, из-за которой контейнер div не имел верхнего заполнения. Теперь все должно работать нормально. - person Luc125; 17.06.2011
comment
@ Luc1245 хорошая работа :) и я вижу, что вы также удалили ненужный float (#friend_pane) - когда элемент позиционируется, он все равно не будет учитывать float, поэтому исходный float был безвреден - однако без height: 100% на friend_pane div IE7 не будет растягивать iframe .. и если вы используете его, вам не нужны как верхние, так и нижние 0 (это зависит от того, нужна ли @Pete Allport поддержка IE7;))- PS: вы можете исправить эту опечатку left-margin на margin-left - person clairesuzy; 17.06.2011
comment
@clairesuzy Да, я думаю, что ваше решение, вероятно, лучше моего... PS: Спасибо, что прочитали мой пост и сообщили мне об опечатке! - person Luc125; 17.06.2011
comment
Спасибо вам двоим, вы действительно помогли мне! - person John Doe; 17.06.2011
comment
@ Пит, не за что .. @ Luc1245 не у кого было «лучшее решение», а у того, кто помог больше всего, и был выбран правильный человек :) - person clairesuzy; 18.06.2011

arrow_upward
2
arrow_downward

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>
person reisio    schedule 11.06.2011
comment
Это хороший ответ, но я думаю, вы можете добавить некоторые пояснения о том, что он делает и почему он работает. - person icktoofay; 11.06.2011
comment
Если кто-то спросит, я, возможно, поясню, но нет смысла пока печатать все, что я знаю о коде. - person reisio; 11.06.2011
comment
Хех - я думаю, что @icktoofay спрашивал! Помните, что это справочный сайт - ответы должны быть полезны будущим читателям, а не просто избавить от неприятностей того, кто задал вопрос... - person Ben Hull; 15.06.2011

arrow_upward
2
arrow_downward

Вы можете использовать обертку div на iframe, чтобы указать, где должны быть его стороны (top:73px; left:0; right:0; bottom:0;) с помощью 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; }

Демо: jsfiddle.net/fErZY

person Marcel    schedule 11.06.2011
comment
Если вы используете оболочку, как описано здесь, она может немного вытекать из нижней части страницы, но body { overflow:hidden } позаботится об этом за вас. - person Steve; 16.06.2011
comment
@Steve: Вы правы, я удалил overflow:hidden и добавил display:block к iframe для более надежного ответа. - person Marcel; 16.06.2011
comment
Это здорово. Очень прочный и будет работать практически везде. Существует исправление, которое вам нужно будет применить для IE6, если вы заботитесь об этом браузере: он не поддерживает одновременно верхнее и нижнее или левое и правое абсолютное положение. Исправление подробно описано здесь: www.alistapart.com/articles/conflictingabsolutepositions/ - person Ben Hull; 17.06.2011

arrow_upward
2
arrow_downward

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

Есть утечка (небольшая?), если это то, на что вы ссылались в своих комментариях, то есть это связано с моделью естественного блока iframe, но я обнаружил, что установка отрицательного нижнего поля -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 вместо отрицательного поля в 4 пикселя на 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 здесь

person clairesuzy    schedule 17.06.2011
comment
Ничего себе, вы получаете выравнивание по центру, комбинируя относительное левое (50%) и абсолютное левое поле (-475px). Я запомню этот трюк... Пожалуйста, объясните, как вы вычисляете это последнее значение? - person Luc125; 17.06.2011
comment
@Luc1245 Luc1245 это половина ширины контейнера, которая составляет 950 пикселей в коде страницы OP, и мой второй пример.. left 50% перемещает весь контейнер, так что его левый край находится в середине тела.. отрицательная половина ширины перемещает его назад влево наполовину это собственная ширина ;) - person clairesuzy; 17.06.2011

arrow_upward
1
arrow_downward

Вы можете обернуть iframe в div и установить position:fixed div с 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;}
person MikeM    schedule 11.06.2011
comment
утечка означает, что iframe отсутствует на странице или страница iframe требует прокрутки? Также вы можете попробовать position:absolute в качестве альтернативы fixed, хотя не уверен, что это исправит - person MikeM; 12.06.2011

arrow_upward
0
arrow_downward

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

arrow_upward
0
arrow_downward

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

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

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

<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>
person BCDeWitt    schedule 15.06.2011