Question

在标题中，我想在我的页面中插入一个响应变量高度顶部标题。内容应采取剩余的高度。在某些情况下，内容是iframe（高度= 100％）。我希望没有多余的滚动条和触摸滚动在手机上运行良好。此外，iframe中的网站应该保持响应状态。

Answer 1

请为CSS尝试此操作：http://jsfiddle.net/K64Mm/6/ 可变高度，内容100％高度（甚至支持iframe 100％高度），没有多余的滚动条，可在触摸设备上滚动，响应式iframe。

<div class="wrapper">
    <div class="top topBar">

    </div> 
    <div class="content">
        <iframe scrolling="yes" src="http://www.zeffirino.com"></iframe>
    </div>
</div>

html, body { width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px; }

.wrapper { width: 100%; height: 100%; padding-bottom: 45px; -webkit-overflow-scrolling: touch !important; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.top { height: 45px; background-color: red; }
.content { height: 100%; width: 100%; overflow: auto !important; }
.content iframe { display: block; border: none; width: 100%; height: 100%; }

可变高度标题和100％高度内容（最终使用iframe），可在移动设备上滚动，没有多余的滚动条

1 个答案: