Je code un site perso et j'utilise AdminLTE. Je suis actuellement confronté à un problème, mon iframe s'affiche mais on doit scroller pour voir toute la page. Je voudrais donc enlever ce scroll comme la page mère est assez grande pour afficher l'iframe. Petite capture d'écran pour bien comprendre :
Code :
<?php
$titre = "Hash";
require("session.php");
require "head.php";
?>
<body class="<?php echo SKIN; ?>" style="height: auto; min-height: 100%;"> <!-- j'ai rajouté le style mais ne marche toujours pas -->
<div class="wrapper" style="height: auto; min-height: 100%;"> <!-- j'ai rajouté le style mais ne marche toujours pas -->
<?php require "design.php"; ?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" style="height: auto; min-height: 100%;">
<!-- Content Header (Page header) -->
<section class="content-header">
<b>Hash</b>
</section>
<!-- Main content -->
<section class="content" style="height: 100%;"> <!-- j'ai rajouté le style mais ne marche toujours pas -->
<div class="box">
<div class="box-body">
<iframe id="sha1" src="sha1.php" height="100%" width="100%" frameborder="0"></iframe>
</div>
</div>
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<?php require "footer.php" ?>
</div><!-- ./wrapper -->
<?php require "scripts.php" ?>
</body>
</html>
J'ai déjà essayer (sans succès) :
html, body {
height : 100%;
width : 100%;
}
Par contre quand je mets un "min-height" ou "height" en pixel, cela marche mais j'aimerais trouver une solution qui s'adapte à l'écran.
box et box-body sont défini par AdminLTE (ou bootstrap) justement donc je ne dois "normalement" pas changer leur code CSS je pense. Ils servent à faire des box avec un titre et un corps bien défini (marge, border ...), tu peux voir ici ce que ça donne dans l'exemple: https://adminlte.io/themes/AdminLTE/index2.html
Sinon je n'ai pas de fichier CSS perso, car j'en ai jamais eu besoin comme la plupart des choses sont déjà définis et me conviennent.
Les flexbox ont l'air cool mais je ne sais pas si ça passerait avec la sidebar à gauche (elle se déplie).
Qu'en penses-tu ? Il faudrait que je crée mes propres classe pour les div ?
EDIT : j'ai trouvé un code javascript mais c'est un peu empirique sur la taille du buffer pour l'instant
function iframeHeight() {
var newHeight = $(window).height();
var newWidth = $(window).width();
var buffer = 220; // space required for any other elements on the page
var newIframeHeight = newHeight - buffer;
$('iframe').css('height',newIframeHeight); //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
}
// When DOM ready
$(function() {
window.onresize = iframeHeight;
iframeHeight();
});
Si tu veux faire ça, y a beaucoup plus simple que du javascript (et sans flexbox) :
iframe {
min-height: calc(100vh - 220px);
}
Mais c'est pareil, ça nécessite de connaître la taille des autres éléments de la page, et être certains qu'ils ne bougent pas.
Par contre oui, bootstrap ne te permets de faire "que" ce qu'ils proposent par défaut. Si tu veux d'avantage, alors il te faut ajouter ton propre CSS (après celui de bootstrap).
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
C'est vrai que ça marche aussi avec min-height: calc(100vh - 220px);
Mais peut-être qu'avec js je peux récupérer la taille des autres éléments et calculer la valeur en fonction de ça, à voir.
Pour le moment je vais rester avec la valeur empirique, ça marche plutôt bien (même sur chrome android). j'essayerais de coder un truc mieux plus tard.
Merci pour les réponses !
Remplir l'espace disponible avec un div
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !