2
我正在使用MVC 4和Bootstrap作爲我正在處理的網站。相當簡單的佈局，我有Bootstrap導航欄保持在頂部（導航欄固定頂部），然後我有一個頁面標題，一個絕對位置和高度的div在菜單下方。包含PDF的iFrame的佈局問題
然後，對於頁面內容我有一個div，再次絕對pos有一個頂部設置，它剛好在頁面標題下啓動。正文上的溢出設置爲無，並在頁面內容上設置爲自動。
body, html
{
height: 100%;
overflow: hidden;
}
.PageTitle
{
position: absolute;
top: 40px;
left: 0;
right: 0;
height: 60px;
color: #fdf4f4;
background-color: #4266cd;
border-color: #bce8f1;
}
.Content
{
overflow: auto;
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
}
這正常工作對其他的頁面，但我需要顯示每月傳單（PDF），並希望它來填充內容區域，並允許用戶滾動它。問題當然是，如果我添加一個100％高度的iFrame，它會佔用內容div的高度（它是父級），這就是瀏覽器窗口的高度。如果我可以告訴它將高度設置爲100％-100px，那將是非常酷的。
我試過改變大小使用jQuery，但沒有任何成功。
任何人有一些想法，可能會幫助我一路？
謝謝。
更新：我讀阿克沙伊Khandelwal的帖子，並創建了一個簡單的HTML頁面的基本知識，如果我想做的事情。在重建我之前遇到的問題的過程中，我可能找到了一個解決方案。它看起來像代碼波紋管的作品。不知道這是否是一個很好的方法來做到這一點。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PDF View Test</title>
<style>
body
{
margin: 0;
overflow: hidden;
}
.NavBarTop
{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 40px;
margin-bottom: 0;
background: #778899;
}
.PageTitle
{
position: absolute;
top: 40px;
left: 0;
right: 0;
height: 60px;
color: #fdf4f4;
background-color: #4266cd;
border-color: #bce8f1;
}
.Content
{
overflow: hidden;
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
}
h3
{
color: rgb(253, 244, 244);
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 25px;
font-weight: bold;
height: 40px;
line-height: 40px;
margin-bottom: 10px;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
text-align: center;
}
h4
{
color: rgb(253, 244, 244);
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
height: 20px;
line-height: 20px;
margin-bottom: 5px;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
text-align: center;
}
iframe
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="NavBarTop">
<h4>This is the menu bar.</h4>
</div>
<div class="PageTitle">
<h3>The Page Title</h3>
</div>
<div class="Content">
<iframe src="http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/products/content-server/pdfs/adobe-ebook-platform-whitepaper.pdf"/>
</div>
</body>
</html>
我用示例HTML頁面更新了文本，其中顯示了我正在嘗試執行的操作。我將把這些修改應用到我的項目中，看看它是否有效。 –
那麼，我在我的主要項目中嘗試過它，它工作。我必須設置內容div的溢出隱藏，否則它會顯示滾動條。 –