Форум

poorking · #1 (**permalink**) 14.02.2012, 11:15

Здравствуйте. С версткой не часто имею дело, поэтому нужна помощь, думаю, что задача классическая.

Есть блок 100% x 100%. Внутри него 2 iframe. Нужно чтобы нижний был прижат к низу и имел фиксированную высоту, а верхний занимал все оставшееся пространство сверху экрана, а не страницы, то есть не должно быть скроллбара у основного окна, если бы это был frameset, то было бы

<frameset rows = "*,50">
    <frame />
    <frame />
</frameset>

Но frameset использовать нельзя. У меня предчувствие что вопрос глупый. Заранее спасибо за помощь.

Magneto · #2 (**permalink**) 14.02.2012, 14:15

Попробуй посмотреть здесь http://www.dikarka.ru/lessons/lesson_14.shtml

poorking · #3 (**permalink**) 14.02.2012, 14:19

Magneto,
Спасибо большое, почитаю

UPD
Посмотрел, там только frameset, с ним то проблем нет, надо сверстать точно также как в примере в первом посте, но с помощью iframe-ов, я так не умею

Magneto · #4 (**permalink**) 14.02.2012, 14:53

Навскидку:

<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
}

body, html {
  height: 100%
}

#wrapper {
  border-bottom: solid 150px transparent;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}

#top {
  width: 100%;
  height: 100%;
}

#bottom {
  width: 100%;
  height: 150px;
  position: absolute;
  bottom: 0px;
}
</style>

<div id="wrapper">
  <iframe id="top" src="http://habrahabr.ru"></iframe>
</div>
  <iframe id="bottom" src="http://javascript.ru"></iframe>

poorking · #5 (**permalink**) 14.02.2012, 14:57

Magneto,
Аххах, интересно с бордером, никогда такого не видел

Спасибо

Seva1986 · #6 (**permalink**) 14.02.2012, 14:58

типа такого?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
body{
height:200px;
}
.box{
width:100%;
height:100%;
}
.box iframe:first-child{
box-sizing:border-box;
-moz-box-sizing:border-box;
padding-bottom:50px;
height:100%;
}
.box iframe+iframe{
height:50px;
margin-top:-50px;
}
iframe{
display:block;
border:0;
}
</style>
</head>
<body>
<div class="box">
	<iframe src="http://javascript.ru/"></iframe>
	<iframe src="http://javascript.ru/"></iframe>
</div>


</body>

</html>

Seva1986 · #7 (**permalink**) 14.02.2012, 14:59

А вам уже ответили...

poorking · #8 (**permalink**) 14.02.2012, 15:02

Seva1986,
Нет, все равно спасибо, интересно иметь на вооружении несколько разных способов, вдруг из за какой то специфики, один из низ не подойдет. Благодарю.

Форум

Справочник

Discord чат

Курсы javascript