J'utilise MVC 4 avec Bootstrap pour un site Web sur lequel je travaille. Mise en page plutôt simple, j'ai la barre de navigation Bootstrap qui reste en haut (navbar-fixed-top), puis j'ai un titre de page, un div avec une position absolue et la hauteur juste en dessous du menu.Problèmes de mise en page avec iFrame contenant le PDF
Ensuite, pour le contenu de la page, j'ai un div, encore une fois avec pos absolu qui a un ensemble supérieur pour qu'il commence juste sous le titre de la page. Le débordement sur le corps est défini sur none et défini sur automatique sur le contenu de la page.
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;
}
Cela fonctionne bien pour d'autres pages, mais je dois montrer un dépliant mensuel (PDF) et il ne doit occuper la zone de contenu et de permettre aux utilisateurs de faire défiler. Le problème est bien sûr que si j'ajoute un iFrame avec 100% de hauteur, il prend la hauteur du contenu div (c'est le parent) et c'est la hauteur de la fenêtre du navigateur. Ce serait très cool si je pouvais lui dire de régler la hauteur à 100% - 100px.
J'ai essayé de changer la taille en utilisant jQuery, mais je n'ai pas eu de succès.
Quelqu'un a-t-il des idées qui pourraient m'aider le long du chemin?
Merci. J'ai lu le message d'Akshay Khandelwal et j'ai créé une page HTML simple avec les bases si ce que j'essaie de faire. En recréant le problème que j'avais auparavant, j'aurais peut-être trouvé une solution. On dirait que le code ci-dessous fonctionne. Je ne sais pas si c'est un bon moyen de le faire ou non.
<!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>
J'ai mis à jour le texte avec un exemple de page HTML montrant ce que j'essaie de faire. Je vais appliquer ces changements à mon projet et voir si cela fonctionne. –
Eh bien, je l'ai essayé dans mon projet principal et cela a fonctionné. Je devais définir le débordement sur le contenu div à masquer, sinon il afficherait des barres de défilement. –