Определение размера вложенных элементов - PullRequest
Новая
       14

Определение размера вложенных элементов

0 голосов
/ 25 августа 2011

Я пытаюсь эмулировать своего рода всплывающую подсказку для моего веб-сайта. Когда пользователь нажимает кнопку «Справка», маска покрывает всю страницу темной частично прозрачной маской, и вспомогательный элемент div с более высоким z-порядком становится видимым. Размер вспомогательной ширины составляет 80% в ширину и 90% в высшем положении, абсолютный слева 10% и верхние 5%, все относительно тела. Пока все отлично. Содержание вспомогательного div: - заголовок полной ширины с закрывающим якорем высотой 20 пикселей, плавающий справа. - iframe-div, чтобы занять остальную часть вспомогательного div, содержащую: - iframe для отображения рассматриваемого html-документа

Проблема: Я ожидаю, что высота iframe-div будет на 20 px меньше, чем div helppage, но по какой-то странной причине она в 3 раза больше, чем div helppage. В результате нижняя часть iframe становится невидимой.

HTML: 

<div id="helpbox">
  <div id="helppage" class="window" style="display: block; position: absolute;">
  <div class="hd-header">
    <a class="close" onclick="hidehelp()"></a>
  </div>
  <div class="iframe-div">
    <iframe id="HelpPageFrame" src="/help-system.html"></iframe>
  </div>
</div>

CSS: 

#helpbox .window {
  position:absolute;
  display:none;
  z-index:9999;
}

#helpbox #helppage {
    background: white;
  width:80%;
  left: 10%;
  top: 5%; 
  height:90%;
  padding: 0px;
  overflow: hidden;
}

#helppage iframe {
    border: none;
    width: 100%;
    height: 100%;
}

#helppage .iframe-div {
    width: 100%; 
    position: relative; 
    display: inline-block;
} 

#helpbox .hd-header {
  height: 20px;
  font-weight: bold;  
  overflow: hidden;
  display: inline-block;
  width: 100%;  
}
#helpbox .close {
  width:20px;
  height:20px;
  display:block;
  float:right;
  clear:right;
  background:transparent url(images/close_icon_double.png) 0 0 no-repeat;
}

Любые предложения будут с благодарностью

edit Как указал Миксель, важная деталь ускользнула, когда я попытался упростить сценарий, который был исправлен.

1 Ответ

1 голос
/ 25 августа 2011

Пожалуйста, будьте аккуратны, когда задаете вопросы.

  1. В селекторе '#helppage .window' есть пробел. Он ничего не выбирает. Из-за этого «#helppage» не является абсолютным позиционером.
  2. Нет элемента #helpbox.

1010 * редактировать * Хотя вы все еще немного неточны (вы забыли закрыть DIV), ответ есть. Вам нужно заполнить оставшуюся часть #helppage с помощью .iframe-div. Если вы установите высоту «.iframe-div» равной 100%, то для родительского элемента - «#helppage» потребуется 100% высоты. Чтобы решить эту проблему, вам нужно абсолютное позиционирование для '.iframe-div': 

#helppage .iframe-div {
    position: absolute;
    top: 20px;
    bottom: 0;
    right: 0;
    left: 0;
}

Или установить высоту с помощью JavaScript. Проверьте это: Сделать DIV заполнить оставшуюся часть страницы по вертикали?

Это довольно распространенный вопрос.

...