Размер встроенных div

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

Проблема: я ожидал, что высота iframe-div будет на 20 пикселей меньше, чем вспомогательный div, но по какой-то странной причине она на 3 пикселя больше, чем вспомогательная div. В результате нижняя часть окна 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;
}

Любые предложения будут ценны

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


html css sizing
person TheRoadrunner    schedule 25.08.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

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

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

person mixel    schedule 25.08.2011
comment
спасибо, что указали на то, что я был не совсем точен. Я пытался упростить, думаю, мне это не удалось ;-) Это также объясняет проблему 1, которая должна быть #helpbox .window - person TheRoadrunner; 25.08.2011
comment
ОЧЕНЬ большое спасибо за ваши усилия, это сработало как шарм. И извините за неточность, рад, что вы все равно решили мне помочь :-) - person TheRoadrunner; 25.08.2011