Jquery (или CSS) автоматически изменяет размер iframe в низ?

Question

Я не знаю, как я могу установить свойства для фрейма, который расположен на 300 пикселей сверху, но должен ВСЕГДА достигать дна!

Итак, на данный момент я установил высоту фрейма в 500 пикселей. Высота должна динамически изменяться при изменении размера окна браузера. Iframe должен начинаться с 300 пикселей сверху и всегда должен доходить до дна.

Я не большой эксперт по CSS. Есть идеи, что мне делать?

    #frame {
 overflow:hidden;
 border:none;
 width:100%;
 height:500px;
 margin-top:300px;
}

Answer 1

html, body { /* Allow the #wrapper div to stretch 100% in both directions */
    height: 100%;
    width: 100%;
    margin: 0;
}
#wrapper { /* necessary because it for some reason doesn't work with the iframe */
    position: absolute;
    top: 300px;
    bottom: 0;
    left: 0;
    right: 0;
}
#frame {
    width: 100%;
    height: 100%;
    border: 0;
}

<div id="wrapper">
    <iframe id="frame" src="http://www.google.com" />
</div>

Answer 2

Вы можете использовать 'margin-bottom' так же, как вы используете 'margin-top'. Самый простой способ CSS, но я не уверен, работает ли это на каждом браузере.