Question

我正在尝试将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/

Answer 1

添加了查找高度的脚本。

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

请检查小提琴 - http://jsfiddle.net/afelixj/94d9tbLx/2/

Answer 2

从页脚和.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

（将高度调整为任何东西）

如何将高度调整到整页高度？

2 个答案: