web-dev-qa-db-fra.com

Comment appliquer 100% de la hauteur à div?

Je veux faire la dernière/troisième division à remplir tout l'espace restant. J'ai donné la hauteur de 100% mais il y a une barre de défilement qui arrive, que je ne veux pas montrer. Je n'ai aucune solution CSS pour la même chose. si ce n’est pas possible à partir de CSS, la solution jQuery/JS sera satisfaisante.

<html style="height:100%">
<head>
    <style type="css">
        html , body {
            width:100%; height:100%;
            padding:0px;
            margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;width:100%">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="display:block;height:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>
javascriptjqueryhtmlcss
18
Wasim Shaikh

Dans jQuery, vous pouvez essayer quelque chose comme ceci:

$(function() {
    $(window).resize(function() {
        $('div:last').height($(window).height() - $('div:last').offset().top);
    });
    $(window).resize();
});

Chaque fois que la fenêtre est redimensionnée, la hauteur de la dernière div est modifiée afin que la div s'étende jusqu'au bas de la page. La méthode de redimensionnement de Windows est appelée au chargement de la page afin que la div soit immédiatement redimensionnée.

Si vous soustrayez le décalage supérieur de la div de la hauteur de la fenêtre, il vous reste la hauteur maximale disponible. Si des marges, des bordures de remplissage sont appliquées, vous devrez peut-être ajuster la valeur soustraite, par exemple:

$('div:last').height($(window).height() - $('div:last').offset().top - 30);

En supposant que vous vouliez div 30px à partir du bas de la fenêtre.

22
Tatu Ulmanen

Sur les navigateurs modernes: définissez position: relative sur le conteneur div, position: absolute sur le troisième div. Ensuite, vous pouvez le positionner en même temps en haut et en bas du conteneur: top: 0px, bottom: 0px;

6
Joó Ádám

Ne vous inquiétez tout simplement pas si votre objectif est que la couleur remplisse le fond.

Définissez la couleur de la div externe et laissez le troisième redimensionner sa hauteur comme bon lui semble lorsque le contenu est inséré.

<html style="height:100%">
<head>
    <style type="css">
        html , body {
                width:100%; height:100%;
                padding:0px;
                margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;width:100%;background-color:#ccc">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="">&nbsp;</div>
    </div>
</body>
</html>
0
Kales

La propriété 'hauteur: 100%;' demandera aux navigateurs d'exploiter l'intégralité de l'espace d'écran disponible pour cette div particulière, ce qui signifie que votre navigateur vérifiera la taille de l'espace de navigation et le renverra au moteur CSS sans vérifier s'il contient des éléments.

La seule solution qui puisse convenir ici consiste à utiliser la solution fournie par David pour utiliser 'position: absolute; en bas: 0; ' pour cette div.

0
Matthew Morek
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
    document.getElementById('app').style.height = window.innerHeight  + "px"
}
0
develdoe
$(window).resize(function(){
        $('.elastic').each(function(i,n){
        var ph = $(this).parent().height();
        var pw = $(this).parent().width();
        var sh = 0; 
        var s = $(this).siblings().each(function(i,n){
            sh += $(this).height();
        })
        $(this).height(ph-sh);
        sh = 0, ph = 0, s=0;

    }); 
});

placez le texte suivant sur votre balise de script ou votre code JavaScript externe. puis changez

lorsque vous redimensionnez la fenêtre ... sa hauteur sera automatiquement ajustée à l'espace disponible sur le bas. vous pouvez avoir autant de div que vous le souhaitez, mais vous ne pouvez avoir qu'un seul élastique à l'intérieur de ce parent. ne pouvait pas être dérangé pour calculer plusieurs élastiques :) espérons que cela aide

0
Val

Vous pouvez masquer le débordement dans la DIV contenant:

<html>
<head>
    <style>
        *{margin:0;padding:0;}
        html,body{height:100%;}
    </style>
</head>
<body>
    <div style="overflow:hidden;height:100%">
        <div style="height:100px;background-color:#ddd"></div>
        <div style="height:25px;background-color:#eee"></div>
        <div style="height:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>

Notez que le contenu peut disparaître lors du redimensionnement de la fenêtre avec cette technique.

0
David Hellsing

c'est un peu moche, mais ça marche ..

 <html style="height:100%">
    <head>
        <style type="css">
            html , body {
                    width:100%;
                    height:100%;
                    padding:0px;
                    margin:0px;
            }
        </style>
    </head>
    <body style="height:100%;padding:0px;margin:0px;">
        <div style="width:100%;height:100%;">
            <div style="width:100%;height:100px;background-color:#ddd;">&nbsp;</div>
            <div style="width:100%;height:25px;background-color:#eee;">&nbsp;</div>
            <div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;">&nbsp;</div>
        </div>
    </body>
 </html>
0
Andre Haverdings
$(document).ready(function() {
    var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
    $("#thirdDiv").height(heightToFill);

    $(window).resize(function(){  var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
    $("#thirdDiv").height(heightToFill);
});

Cela devrait être inclus si le navigateur est redimensionné ....

0
L i

Voici un petit correctif que j'ai fait: 

<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
        $("#thirdDiv").height(heightToFill);
    });
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
    <div id="firstDiv" style="height: 100px; background-color: #ddd">
        &nbsp;</div>
    <div id="secondDiv" style="height: 25px; background-color: #eee">
        &nbsp;</div>
    <div id="thirdDiv" style="background-color: #ccc;">
        &nbsp;a</div>
</div>
</body>
</html>
0
Jronny

Vous pouvez utiliser des valeurs CSS purecode height:100% (où 100% est la hauteur de la zone visible dans la fenêtre) en mode quirks en n'utilisant pas du tout DOCTYPE ou en utilisant DOCTYPE HTML 4.0 défectueux (sans l'URL .dtd)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>

Vous pouvez abandonner le <!DOCTYPE.. entièrement, cela aurait toujours le même effet. La déclaration overflow:hidden dans le style du corps consiste à supprimer la barre de défilement vide dans IE. Mais rappelez-vous - c’est le mode quirks ce qui signifie que vous êtes sur un territoire imprévisible, le modèle de boîte CSS diffère d’un navigateur à l’autre!

0
Andris

Vous pouvez également utiliser de fausses colonnes en ajoutant une image d’arrière-plan se répétant verticalement au code CSS, donnant ainsi l’apparence des colonnes à l’espace. Vous pouvez ajouter cette image à la division qui enveloppe les trois colonnes ou à la balise body.

Si ces colonnes contiennent du contenu, il vaut probablement la peine d'en ajouter car les colonnes se comporteront différemment.

0
matpol
html style="height:100%">
<head>
    <style type="css">
        html , body {
                width:100%; 
                height:100%;
                padding:0px;
                margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>

Peut-être que cela pourrait fonctionner?! Mais je ne sais pas ce qui se passe s'il y a un texte à traiter ...

0
Haiko