I am using MVC 4 with Bootstrap for a website I am working on. Rather simple layout, I have the Bootstrap nav bar that stays at top (navbar-fixed-top), then I have a page title, a div with an absolute position and height just bellow the menu.
Then for the page content I have a div, again with absolute pos that has a top set to that it starts just under the page title. The overflow on the body is set to none and set to auto on the page content.
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;
}
This works fine for other pages, but I need to show a monthly flyer (PDF) and want it to fill the content area and allow users to scroll it. Problem is of course that if I add an iFrame with 100% height, it takes the height of the content div (it’s parent) and that’s the height of the browser window. It would be very cool if I could tell it to set the height to 100% – 100px.
I have tried changing the size using jQuery, but have not had any success.
Anyone have some ideas that might help me along the way?
Thanks.
UPDATE: I read Akshay Khandelwal’s post and created a simple HTML page with the basics if what I am trying to do. In the process of recreating the problem I had before, I might have found a solution. It look like the code bellow works. Not sure if this is a good way to do it or not.
<!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>
I found the answer to the question I was asking, even though I am not convinced it’s the best way to do it. For completeness, here’s the HTML that will give you a PDF embedded in a web page with scroll bars that only scroll the PDF document and not the page title and menu’s.