Comment faire pour que le div occupe la hauteur restante ?

Question

J'ai ce problème, j'ai deux divs :

<div style="width:100%; height:50px;" id="div1"></div>
<div style="width:100%;" id="div2"></div>

Comment faire pour que la div2 occupe la hauteur restante de la page ?

Answer 1

Avec les tableaux CSS, vous pourriez enrouler un div autour des deux que vous avez là et utiliser cette structure css/html :

<style type="text/css">
.container { display:table; width:100%; height:100%;  }
#div1 { display:table-row; height:50px; background-color:red; }
#div2 { display:table-row; background-color:blue; }
</style>

<div class="container">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

Cela dépend toutefois des navigateurs qui prennent en charge ces types d'affichage. Je ne pense pas qu'IE8 et les versions inférieures le fassent. EDIT : Grattez ça - IE8 supporte les tableaux CSS.

Answer 2

Vous pouvez utiliser

display: flex;

CSS, comme mentionné précédemment par @Ayan, mais j'ai créé un exemple fonctionnel : https://jsfiddle.net/d2kjxd51/

Answer 3

J'ai essayé avec CSS, et ou vous devez utiliser display : table ou vous devez utiliser un nouveau css qui n'est pas encore supporté par la plupart des navigateurs (2016).

J'ai donc écrit un plugin jquery pour le faire à notre place, je suis heureux de le partager :

//Credit Efy Teicher
$(document).ready(function () {
            $(".fillHight").fillHeight();
            $(".fillWidth").fillWidth();
        });

        window.onresize = function (event) {
            $(".fillHight").fillHeight();
            $(".fillWidth").fillWidth();
        }

        $.fn.fillHeight = function () {
            var siblingsHeight = 0;
            this.siblings("div").each(function () {
                siblingsHeight = siblingsHeight + $(this).height();
            });

            var height = this.parent().height() - siblingsHeight;
            this.height(height);
        };

        $.fn.fillWidth = function (){
            var siblingsWidth = 0;
            this.siblings("div").each(function () {
                siblingsWidth  += $(this).width();
            });

            var width =this.parent().width() - siblingsWidth;
            this.width(width);
        }

      * {
            box-sizing: border-box;
        }

        html {
        }

        html, body, .fillParent {
            height: 100%;
            margin: 0;
            padding: 0;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="fillParent" style="background-color:antiquewhite">
        <div>
            no1
        </div>
        <div class="fillHight">
            no2 fill
        </div>
        <div class="deb">
            no3
        </div>
    </div>

Answer 4

Vous pourriez utiliser calc pour calculer la hauteur restante de la deuxième division.

*{
  box-sizing: border-box;
}

#div1{
  height: 50px;
  background: skyblue;
}

#div2{
  height: calc(100vh - 50px);
  background: blue;
}

<div id="div1"></div>
<div id="div2"></div>

Answer 5

Je ne suis pas sûr que cela couvre votre scénario, mais j'ai créé un fichier de type exemple sur jsfiddle

html :

 <div id="wrapper">
  <div id="one"></div>
  <div id="two"></div>
 </div>

css :

 #one{height: 50px; background:yellow;}
 #two{height:100%;background: red;}
 #wrapper{height:300px;overflow: hidden;}