Как я могу поставить div и iframe, занимающие 100% высоты окна? - PullRequest
Новая
       3

Как я могу поставить div и iframe, занимающие 100% высоты окна?

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

Я хотел бы заменить страницу набора фреймов страницей с div (меню) и iframe (контентом).

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

Как сделать так, чтобы iFrame покрывал только оставшееся пространство окна?

jsfiddle -> http://jsfiddle.net/Q3UV2/

CSS 

body {
    background-color:Black;
    margin:0px;
    overflow:auto;
}
#divMenu {
    top:0px;
    left:0px;
    height: 100px;
    width:100%;
    background-color:Gray;
}
#ifrContent {
    position:absolute;
    width:100%;
    height:100%;
}

HTML 

<body>
    <div id="divMenu">Menu</div>
    <iframe id="ifrContent" frameborder="0" src="http://www.ebay.com/"></iframe>
</body>

Ответы [ 2 ]

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

CSS 

body {
    background-color:Black;
    margin:0px;
    overflow:hidden;
}
#divMenu {
    position:absolute;
    top:0px;
    left:0px;
    height: 100px;
    width:100%;
    background-color:Gray;
}
#divConteudo {
    position:absolute;
    width:100%;
    bottom:0px;
    top:100px;
    background-color:#0ff;
}

HTML 

<div id="divMenu">Menu</div>
<div id="divConteudo">
    <iframe id="ifrConteudo" frameborder="0" src="http://www.ebay.com/" width="100%" height="100%" style="background-color:#fff"></iframe>
</div>
0 голосов
/ 03 августа 2011

Поместите этот код в ваш css: 

html, body {
height:100%;
}

При установке высоты div на 100% он занимает 100% высоты его родительского div, поэтому установка высоты div на 100% не означаетничего, пока вы не установите его родительский рост на 100%.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...