web-dev-qa-db-fra.com

Comment faire en sorte d'occuper la hauteur restante?

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 en sorte que div2 occupe la hauteur restante de la page?

htmlcssxhtml
61
user666491

Utiliser le positionnement absolu:

#div1{
    width: 100%;
    height: 50px;
    background-color:red;/*Development Only*/
}
#div2{
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    background-color:blue;/*Development Only*/
}
<div id="div1"></div>
<div id="div2"></div>

53
Alexander Rafferty

Vous pouvez utiliser ceci http://jsfiddle.net/Victornpb/S8g4E/783/

#container {
    display: table;
    width: 400px;
    height: 400px;
}
#container > div{
    display: table-row;
    height: 0;
}
#container > div.fill{
    height: auto;
}

Il suffit d’appliquer la classe .fill à l’un des enfants pour qu’il occupe ensuite la hauteur restante.

<div id="container">
    <div>
        Lorem ipsum
    </div>
    <div>
        Lorem ipsum
    </div>
    <div class="fill">   <!-- this will fill the remaining height-->
        Lorem ipsum
    </div>
</div>

Cela fonctionne avec le nombre d'enfants que vous voulez, aucun balisage supplémentaire n'est requis.

20
Vitim.us

Démo

Une solution consiste à définir la div sur position:absolute et de lui attribuer un sommet de 50px et un minimum de 0px;

#div2
{
    position:absolute;
    bottom:0px;
    top:50px
}
12
Joseph Marikle

Puisque vous savez combien de pixels sont occupés par le contenu précédent, vous pouvez utiliser la fonction calc():

height: calc(100% - 50px);
6
herman

Vous pouvez utiliser

display: flex;

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

4
Cezary Tomczyk

Avec les tables CSS, vous pouvez envelopper une div autour de deux 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 que IE8 et inférieur le font. EDIT: Scratch that-- IE8 prend en charge les tables CSS.

4
Brendan

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

Alors j’ai écrit un plugin jquery pour le faire pour nous, 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>

1
user1911353

J'ai moi-même relevé le même défi et j'ai trouvé ces 2 réponses à l'aide de propriétés flex.

CSS

.container {
  display: flex;
  flex-direction: column;
}

.dynamic-element{
  flex: 1;
}
1
Muhammad Omar ElShourbagy
<div>
  <div id="header">header</div>
  <div id="content">content</div>
  <div id="footer">footer</div>
</div>

#header {
  height: 200px;
}

#content {
  height: 100%;
  margin-bottom: -200px;
  padding-bottom: 200px;
  margin-top: -200px;
  padding-top: 200px;
}

#footer {
  height: 200px;
}
0
wmzy

Pourquoi ne pas utiliser un rembourrage avec des marges négatives? Quelque chose comme ça:

<div class="parent">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
</div>

Et alors

.parent {
  padding-top: 1em;
}
.child1 {
  margin-top: -1em;
  height: 1em;
}
.child2 {
  margin-top: 0;
  height: 100%;
}
0
kalu