Как получить высоту до полной высоты страницы?

Я пытаюсь получить iframe до полной высоты страницы, но это не работает. Я уже пробовал много способов сделать это, но никто из них не работал бы для меня ...Как получить высоту до полной высоты страницы?

Я надеюсь, что некоторые из вас знают, как это сделать!

HTML:

<body> 
    <article> 
     <h1>Hello world</h1> 
     <p class="subtitle fancy "> 
      <span>Versie 1.0</span> 
     </p> 
    </article> 

    <iframe class="configurator " src="" frameBorder="0">Browser not compatible.</iframe> 

    <footer> 
     <span class="arrow "></span> 
     <p>&#169; Copyright 2015</p> 
    </footer> 
</body>

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
} 
body { 
    background: #ECECEC; 
    margin: 0px; 
    color: #333; 
    font-family:'Cinzel Decorative', cursive; 
} 
h1 { 
    font-size: 3em; 
    text-align: center; 
} 
article { 
    max-width: 600px; 
    overflow: hidden; 
    margin: 0 auto 50px; 
} 
.subtitle { 
    margin: 0 0 2em 0; 
} 
.fancy { 
    text-align: center; 
    display: -webkit-flex; 
} 
.fancy:before, .fancy:after { 
    content:""; 
    border-bottom: 1px solid white; 
    border-top: 1px solid white; 
    -webkit-flex: 1; 
    margin: .45em 0; 
} 
.fancy:before { 
    margin-right: 15px; 
} 
.fancy:after { 
    margin-left: 15px; 
} 
footer { 
    background-color: #D7D7D7; 
    position: relative; 
    margin-bottom: 0px; 
    width: 100%; 
    height: 50px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    font-family:'Montserrat', sans-serif; 
    border-top: 2px solid white; 
} 
footer p { 
    margin-left: 10px; 
    font-size: 15px; 
    color: #626262; 
} 
footer:before, footer:after, footer > .arrow { 
    content:""; 
    position: absolute; 
    bottom: 100%; 
    left: 50%; 
    margin-left: -20px; 
    border: 20px solid transparent; 
    border-bottom-color: #D7D7D7; 
    pointer-events: none; 
} 
footer:after { 
    margin-left: -8px; 
    border-width: 8px; 
} 
footer > .arrow { 
    margin-left: -11px; 
    border-width: 11px; 
    border-bottom-color: #fff; 
} 
.configurator { 
    width: 100%; 
    background-color: white; 
    position: absolute; 
    margin-top: -50px; 
    margin-bottom: -1000px; 
}

Так что я хочу, это высота IFrame весь путь до дна от верхней части колонтитула.

jsFiddle: http://jsfiddle.net/94d9tbLx/

источник

2015-11-03 G0ldenowner

Добавлен скрипт, чтобы найти высоту.

var h = $(document).outerHeight() - $('article').outerHeight() - $('footer').outerHeight(); 
$('iframe').css('height', h);

Пожалуйста, проверьте скрипку - http://jsfiddle.net/afelixj/94d9tbLx/2/

источник

2015-11-03 11:15:46

Спасибо, сэр! Еще один вопрос, чтобы сделать его еще более совершенным, может быть, все равно, чтобы он был изменен? Поэтому он обновляется. EDIT: Я уже получил его, я добавил обработчик .resize. – G0ldenowner

Убрать все стили из колонтитула и .configurator и добавьте следующее:

footer { 
    background-color: #D7D7D7; 
    margin-bottom: 0px; 
    width: 100%; 
    height: 50px; 
    left: 0px; 
    font-family: "Montserrat",sans-serif; 
    border-top: 2px solid #FFF; 
    bottom: 0px; 
    position: relative; 
    float: left; 
} 

.configurator { 
    width: 100%; 
    background-color: #FFF; 
    height: 100vh; 
    float: left; 
    position: relative; 
}

FIXED JSFIDDLE

(отрегулировать высоту к чему-либо)

источник

2015-11-03 11:36:26 MaartenPAC

Он идет за нижним колонтитулом, поэтому он слишком длинный. – G0ldenowner

Исправлено это :) и обновлено jsFiddle – MaartenPAC

Как получить высоту до полной высоты страницы?

ответ

Смежные вопросы