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

ProgramBox

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

Post author:admin
Запись опубликована:17 апреля, 2023
Post category:Вопросы по программированию

#html #css #padding #margin

#HTML #css #заполнение #маржа #поле

Вопрос:

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

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

1. Я лично использую jquery для вычисления оставшегося количества и присвоения высоты iframe, просто мысль… возможно, вы также захотите учитывать 95% в любое время, это неприятно, но оно охватывает 95% ситуаций 🙂

Ответ №1:

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

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

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

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.) — Правая панель (div «span-12 last»):

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

  <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 «контейнера». Эти трюки принадлежат @claresuzy, я сам их не нашел.

1. Это отлично сработало, за исключением того, что мой контейнер и два divs теперь выровнены по левой стороне страницы… есть идеи? Я обновил свой ответ изображением проблемы

2. Извините, я не понял, что вы хотели, чтобы два divs были выровнены по центру. Вы могли бы установить запас (например, 20%), чтобы они были не так далеко слева, но это не то же самое, что масштабируемое выравнивание по центру, поэтому я собираюсь поискать другое решение.

3. Теперь я знаю, как выровнять его по центру, благодаря @claresuzy я обновил свой пост. Также была небольшая синтаксическая ошибка, из-за которой в контейнерном div не было верхнего заполнения. Теперь все должно работать нормально.

4. @Luc1245 хорошая работа 🙂 и я вижу, что вы также удалили ненужный float ( #friend_pane ) — когда элемент позиционируется, он все равно не будет учитывать float, поэтому исходный float был безвредным — Однако без height: 100% включения friend_pane div IE7 не будет растягивать iframe .. и если вы используете его, вам не нужны оба верхних и нижних 0 (это зависит от того, нужна ли @Pete Allport поддержка IE7 ;))- PS: возможно, вы захотите исправить эту left-margin опечатку, чтобы margin-left

5. @Pete всегда пожалуйста.. @Luc1245 дело было не в том, у кого было «лучшее решение», а в том, кто помог больше всех, и был выбран правильный человек 🙂

Ответ №2:

http://jsfiddle.net/HZTTp /:

<!doctype html>
<html>
 <заголовок>
 <заголовок></title>
 <стиль>
html, 
тело {
 поле: 0; 
 переполнение: скрыто;
}
тело { 
 заполнение: 0! важно;
 заполнение: 30 пикселей 0 0;
}
#top { 
 позиция: абсолютная;
 top: 0;
 осталось: 0; 
 высота: 30 пикселей;
 ширина: 100%;
 переполнение: скрыто;
 фон: серый;
}
HTML 
> 
тело 
#бот { 
 позиция: абсолютная;
 верхний предел: 30 пикселей;
 внизу: 0; 
 ширина: 100%;
}
объект { 
 ширина: 100%;
 высота: 100%;
}
 </style>
 </head>
 <тело>
 <идентификатор div="top"></div>
 <идентификатор div ="бот">
 <данные объекта="foo"></object>
 </div>
 </body>
</html>

1. Это хороший ответ, но я думаю, вы можете захотеть добавить некоторое объяснение того, что он делает и почему это работает.

2. Если кто-то спросит, я, вероятно, поясню, но нет смысла вводить все, что я знаю о коде, в промежуточный период.

3. Хех — я думаю, @icktoofay спрашивал! Помните, что это справочный сайт — ответы должны быть полезны будущим читателям, а не просто избавлять от проблем того, кто задал первоначальный запрос…

Ответ №3:

Вы можете использовать оболочку 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

1. Если вы используете оболочку, как описано здесь, то она может немного просачиваться с нижней части страницы, но body { overflow: hidden } позаботится об этом за вас.

2. @Steve: Вы правы, я удалил overflow:hidden и добавил display:block на iframe для более надежного ответа.

3. Это здорово. Очень надежный и будет работать практически везде. Есть исправление, которое вам нужно применить для IE6, если вас интересует этот браузер: он не поддерживает абсолютное положение сверху снизу или слева справа одновременно. Исправление подробно описано здесь: www.alistapart.com/articles/conflictingabsolutepositions/

Ответ №4:

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

Есть утечка (небольшая?), если это то, на что вы ссылались в своих комментариях, это связано с моделью iframes natural box, но я обнаружил, что установка отрицательного нижнего поля -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 POINTSamp;nbsp;amp;nbsp;<font color="#000000">0 Points</font><br/>
        ACCOUNT STATUSamp;nbsp;amp;nbsp;<font color="#2C8231">No Problems Found</font><br/>
        CONNECTBOXamp;nbsp;amp;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...amp;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 здесь

1. Вау, выравнивание по центру получается путем объединения относительного левого (50%) и абсолютного левого полей (-475px). Я запомню этот трюк… Пожалуйста, не могли бы вы объяснить, как вы вычисляете это последнее значение?

2. @Luc1245 это половина ширины контейнера, которая составляет 950 пикселей в коде страницы OP и моем втором примере.. левые 50% перемещают весь контейнер, так что его левый край находится в середине тела .. отрицательная половина ширины перемещает его влево на половину его собственной ширины 😉

Ответ №5:

Вы можете обернуть свой div iframe в div и задать для div position:fixed с помощью top:73px then 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;}

1. утечка означает, что iframe отсутствует на странице или страница iframe требует прокрутки? Также вы можете попробовать position:absolute в качестве альтернативы fixed , хотя не уверен, что это исправит

Ответ №6:

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

Ответ №7:

Похоже, что iframe обрабатывается как элемент с абсолютным расположением, независимо от того, указано это в css или нет. Если его контейнер расположен абсолютно, он должен иметь возможность заполнить контейнер, используя width: 100% и height: 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>