如何使內容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/