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冲突时。非常感谢帮助＆gt;

提前谢谢。

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/

如何让内容div占用所有开放空间？（与JQM冲突）

1 个答案:

如何让内容div占用所有开放空间？ （与JQM冲突）

1 个答案:

如何让内容div占用所有开放空间？（与JQM冲突）