我的网页一共有四个页面，然后我用iframe来切换四个页面，但是由于“第四个页面”比较长，所以影响 到其他三个页面的高度了，而且我的页面高度是自适应的，怎么让iframe不影响其他三个页面的正常高度呢？

<p class="Boutique" >

    <ul>
        <li id="li_1" style="color:#e8c77a;" onclick="change(0)">1</li>
        <li id="li_2" onclick="change(1)">2</li>
        <li id="li_3" onclick="change(2)">3</li>
        <li id="li_4" onclick="change(3)">4</li>
    </ul>
</p>
<p id="slider_reco" class="mui-slider">
    <p class="mui-slider-group">
        <p class="mui-slider-item">
            <iframe id="html_1" src="themes/xiaomiv2/one_fen.html"  frameBorder="0" width="100%" scrolling="yes" ></iframe>
        </p>
        <p class="mui-slider-item">
            <iframe id="html_2" src="themes/xiaomiv2/Down_bedding.html" frameBorder="0" width="100%" scrolling="yes"></iframe>
        </p>
        <p class="mui-slider-item">
            <iframe id="html_3" src="themes/xiaomiv2/Home_kit.html" frameBorder="0" width="100%" scrolling="yes"></iframe>
        </p>

<p class="mui-slider-item">

            <iframe id="html_4" src="themes/xiaomiv2/Custom_zone.html" frameBorder="0" width="100%" scrolling="yes"></iframe>
        </p>
    </p>
</p>

</body>
<script>

//计算高度
var h = window.screen.height;
var iframe_h = h - ($(".top").height()) - ($(".Boutique").height());
$("iframe").height(iframe_h);
var slider_reco = mui('#slider_reco');

//页面切换js
function change(id) {
    document.getElementById("li_1").style.color = "black";
    document.getElementById("li_2").style.color = "black";
    document.getElementById("li_3").style.color = "black";
    document.getElementById("li_4").style.color = "black";

    if(id == 0) {
        document.getElementById("li_1").style.color = "#e8c77a";
        slider_reco.slider().gotoItem(0);
    }
    if(id == 1) {
        document.getElementById("li_2").style.color = "#e8c77a";
        slider_reco.slider().gotoItem(1);
    }
    if(id == 2) {
        document.getElementById("li_3").style.color = "#e8c77a";
        slider_reco.slider().gotoItem(2);
    }
    if(id == 3) {
        document.getElementById("li_4").style.color = "#e8c77a";
        slider_reco.slider().gotoItem(3);
    }
}

</script>

ps:由于代码过多，所以只能贴部分主要代码，四个页面高度都自适应，但是不知道为什么第四个页面会影响到前三个页面，第四个页面是长页面，有什么方法可以控制吗？谢谢