CSS: Le redimensionnement du bloc inférieur force le bloc supérieur à rétrécir (à l'intérieur d'un conteneur de taille fixe)

Je recherche une solution CSS pour le problème suivant. A l'intérieur d'un conteneur, nous avons deux blocs, alignés verticalement, de sorte qu'ils remplissent toute la surface du conteneur, ne se chevauchent pas et que le bas grossit, le haut rétrécit (sans s'étirer hors de la taille du conteneur).CSS: Le redimensionnement du bloc inférieur force le bloc supérieur à rétrécir (à l'intérieur d'un conteneur de taille fixe)

Considérons que nous commencions par la mise en page créée par le code ci-dessous (allez voir les dans le navigateur). Les deux conditions suivantes doivent être remplies:

Lorsque la taille du .box est modifié, et .top.bottom ensemble remplir toute la surface de celui-ci, mais la hauteur du .bottom reste fixe.
Lorsque la hauteur de .bottom est modifiée, la hauteur de .top est changé; le .box n'est pas affecté.

Donc, je veux toute cette case-modèle à contrôler (par exemple, modifié par JavaScript) que par .box « s largeur/hauteur et .bottoms » hauteur de , tout le reste est réglé par CSS automatiquement.

Le code (il est loin de la solution et je sais que cela peut être fait avec peu de JavaScript, mais nous allons trouver une solution pure CSS):

<html> 
    <head> 
    <style> 
     .box { 
      position:fixed; 
      top:20px; 
      left:20px; 
      width:200px; /* these adjust the whole box size,*/ 
      height:320px; /* children cannot stretch out of these limits*/ 
      background:silver; 
     } 
     .top { 
      clear:left; 
      height:280px; /* we want it to be like '100%-bottom's height'!*/ 
      margin: 3px; 
      background: white; 
     border: red 1px solid; 
     } 
     .bottom { 
      position:absolute; 
      bottom:0; 
      //top:0; 
      left:0; 
      right:0; 
      margin: 3px; 
      height: 27px; /* this adjusts how top & bottom are sized inside the box*/ 
      background: white; 
     border: blue 1px solid; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="box"> 
     <div class="top">Top</div> 
     <div class="bottom">Bottom</div> 
    </div> 
    </body> 
</html>

Source

2010-01-21 pavek

Je ne vois aucune raison pourquoi avez-vous vouloir faire cela et ne pas contrôler la hauteur avec le .top.bottom eux-mêmes.

Avec ce code, la hauteur dépend du texte à l'intérieur des divs.

<html> 
    <head> 
    <style> 
     .box { 
     border:1px solid #583454; 
      position:fixed; 
      top:20px; 
      left:20px; 
      width:200px; // these adjust the whole box size, 
      height:320px; // children cannot stretch out of these limits 
      background:silver; 
     } 
     .top { 
      clear:left; 
      height:280px; // we want it to be like '100%-bottom's height'! 
      margin: 3px; 
      background: white; 
     border: red 1px solid; 
     } 
     .bottom { 

      bottom:0; 
      //top:0; 
      left:0; 
      right:0; 
      margin: 3px; 
      height: 27px; // this adjusts how top & bottom are sized inside the box 
      background: white; 
     border: blue 1px solid; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="box"> 
     <div class="top">Top</div> 
     <div class="bottom">Bottom</div> 
    </div> 
    </body> 
</html>

Source

2010-01-21 23:55:05

Je pense que vous avez tout simplement de changer:

.top { 
      height:280px; 
     }

à:

.top { 
      height:100%; 
     }

Ensuite, si vous ajustez la hauteur de "boîte", la hauteur du "top" ajuste pour remplir l'espace supplémentaire tandis que la hauteur de "bas" reste la même. Et quand vous changez la hauteur de "bottom", la hauteur de "top" s'ajuste pour remplir l'espace mais la hauteur de "box" reste la même.

Est-ce que cela résout votre problème?

Source

2010-09-23 19:37:53 TheLibzter

CSS: Le redimensionnement du bloc inférieur force le bloc supérieur à rétrécir (à l'intérieur d'un conteneur de taille fixe)

Répondre

Questions connexes