我想獲得的整個頁面高度的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>© 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/
謝謝先生!還有一個問題可能會讓它變得更加完美,有沒有辦法讓它可以調整大小?所以它會更新。編輯:我已經知道了,我添加了.resize處理程序。 – G0ldenowner