html - 如何让内容 div 占据所有开放空间？ (与JQM冲突)

Question

在我的应用程序中，我尝试在 iFrame 中显示 pdf(已涵盖)。

我的问题是 iFrame 没有占用页眉和页脚 div 之间的整个页面空间。我正在为我的主题使用 Jquery Mobile 1.1.0。

我认为它不像边距和填充那么小。它位于更大范围的开放空间中。

这是我的 html:

    <!-- Start of pdfReader page: #pdfReader -->
<div data-role="page" id="pdfReader" data-theme="b">

    <div data-role="header">
        <h3 id="keyHeader2">Key Description</h3>
    </div> <!-- /header -->

    <div data-role="content">
        <iframe id="pdfFrame" width="100%" height="auto" src=""></iframe>
    </div>

    <div data-role="footer" class="footer">

        <p class="margin">
            <a href="#keyPopup" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back</a>
        </p>

    </div>
</div> <!-- /#pdfReader -->

相关 CSS:

.footer{
    position:fixed;
    height:50px;
    bottom:0px;
    left:0px;
    right:0px;
    margin-bottom:0px;
}

JQM 链接:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

正如我所说。我的问题是包含 iFrame 的 div 不会占据页面的整个高度(留下一个没有吸引力的空白空间)。抱歉，如果这是一个基本修复，但我的 CSS 相当生疏，尤其是当它必须与 JQM CSS 冲突时。非常感谢帮助>

提前谢谢你。

Answer 1

这里有一个非常小的 CSS 问题。 iframe 周围的包装 div 有一个需要取消的填充。

div.ui-content {
    padding: 0;
}

然后让您的 iframe 全高(不包括导航栏和页脚)只需将其添加到您的 iframe

iframe#pdfFrame {
    min-height: calc(100% - 100px)
}

这是一个演示 JSFIDDLE:http://jsfiddle.net/ymKL9/2/