Définir la hauteur d'un div en HTML avec CSS

StackOverflow https://stackoverflow.com/questions/4973

  •  08-06-2019
  •  | 
  •  

Question

J'essaie de présenter une page semblable à un tableau avec deux colonnes.Je souhaite que la colonne la plus à droite soit ancrée à droite de la page et que cette colonne doit avoir une couleur d'arrière-plan distincte.Le contenu du côté droit sera presque toujours plus petit que celui de gauche.J'aimerais que le div à droite soit toujours assez grand pour atteindre le séparateur de la ligne en dessous.Comment puis-je faire en sorte que ma couleur d’arrière-plan remplisse cet espace ?

.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

Modifier:Je suis d'accord que cet exemple ressemble beaucoup à un tableau et qu'un tableau réel serait un bon choix.Mais ma « vraie » page finira par ressembler moins à un tableau, et j’aimerais d’abord maîtriser cette tâche !

De plus, pour une raison quelconque, lorsque je crée/modifie mes messages dans IE7, le code s'affiche correctement dans la vue d'aperçu, mais lorsque je publie le message, le formatage est supprimé.La modification de mon message dans Firefox 2 semble avoir fonctionné, FWIW.

Autre modification :Ouais, j'ai refusé la réponse de GateKiller.Cela fonctionne en effet bien sur ma page simple, mais pas sur ma page plus lourde.Je vais enquêter sur certains des liens que vous m'avez tous indiqués.

Était-ce utile?

La solution

Hum...

La réponse courte à votre question est que vous devez définir la hauteur de 100 % pour le corps et la balise html, puis définir la hauteur à 100 % sur chaque élément div pour lequel vous souhaitez que la hauteur de la page soit à 100 %.

En fait, une hauteur de 100 % ne fonctionnera pas dans la plupart des situations de conception : cela peut être court, mais ce n'est pas une bonne réponse.Google : mises en page "n'importe quelle colonne la plus longue".La meilleure façon est de mettre les colonnes gauche et droite dans un emballage. div, faites flotter les colonnes gauche et droite, puis faites flotter l'emballage - cela l'étire jusqu'à la hauteur des conteneurs internes - puis définissez l'image d'arrière-plan sur l'emballage extérieur.Mais surveillez les marges horizontales sur les éléments flottants au cas où vous obtiendriez le "bug flottant à double marge" d'IE.

Autres conseils

Essayez ceci :

html, body,
#left, #right {
  height: 100%
}

#left {
  float: left;
  width: 25%;
}
#right {
  width: 75%;
}
<html>
  <body>
    <div id="left">
      Content
    </div>
    <div id="right">
      Content
    </div>
  </body>
</html>

Certains navigateurs prennent en charge les tableaux CSS, vous pouvez donc créer ce type de mise en page en utilisant les différents CSS display: table-* valeurs.Il y a plus d'informations sur les tables CSS dans cet article (et le livre du même nom) de Rachel Andrew : Tout ce que vous savez sur CSS est faux

Si vous avez besoin d'une mise en page cohérente dans les anciens navigateurs qui ne prennent pas en charge les tableaux CSS, vous devez faire deux choses :

  1. Faites en sorte que votre élément "ligne de tableau" efface ses éléments flottants internes.

    La façon la plus simple de procéder est de définir overflow: hidden qui prend en charge la plupart des navigateurs, et zoom: 1 pour déclencher le hasLayout propriété dans les anciennes versions d’IE.

    Il existe de nombreuses autres façons d'effacer les flotteurs. Si cette approche provoque des effets secondaires indésirables, vous devriez vérifier la question. quelle méthode de 'clearfix' est la meilleure et l'article avoir une mise en page pour d'autres méthodes.

  2. Équilibrez la hauteur des deux éléments « cellule de tableau ».

    Vous pouvez aborder cela de deux manières.Soit vous pouvez créer une apparence de hauteurs égales en définissant une image d'arrière-plan sur l'élément "ligne de table" (l'élément technique de fausses colonnes) ou vous pouvez faire correspondre les hauteurs des colonnes en donnant à chacune un remplissage important et une marge négative tout aussi grande.

    Les fausses colonnes sont l'approche la plus simple et fonctionnent très bien lorsque la largeur d'une ou des deux colonnes est fixe.L'autre technique fonctionne mieux avec les colonnes de largeur variable (basées sur des pourcentages ou des unités em) mais peut causer des problèmes dans certains navigateurs si vous créez un lien direct vers le contenu de vos colonnes (par ex.si une colonne contenait <div id="foo"></div> et tu es lié à #foo)

Voici un exemple utilisant la technique padding/margin pour équilibrer la hauteur des colonnes.

html, body {
  height: 100%;
}

.row {
  zoom: 1;          /* Clear internal floats in IE */
  overflow: hidden; /* Clear internal floats */
}

.right-column,
.left-column {
  padding-bottom: 1000em;  /* Balance the heights of the columns */
  margin-bottom: -1000em;  /*                                    */
}

.right-column {
  width: 20%;
  float: right;
}

.left-column {
  width: 79%;
  float: left;
}
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>

Cette démo Barcamp de Natalie Downe peut également être utile pour déterminer comment ajouter des colonnes supplémentaires et un espacement et un remplissage agréables : Colonnes de hauteur égale et autres astuces (c'est aussi là que j'ai découvert pour la première fois l'astuce de marge/remplissage pour équilibrer les hauteurs de colonnes)

J'ai abandonné strictement CSS et utilisé un peu de jquery :

var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();

if (leftcol_height > rightcol_height)
    rightcol.height(leftcol_height);
else
    leftcol.height(rightcol_height);

Voici un exemple de colonnes de même hauteur : Colonnes à hauteur égale - revisitées

Vous pouvez également consulter l'idée des "Fausses colonnes" - Fausses colonnes

N'empruntez pas la route des tables.S'il ne s'agit pas de données tabulaires, ne les traitez pas comme telles.C'est mauvais pour l'accessibilité et la flexibilité.

J'ai eu le même problème sur mon site (fiche sans vergogne).

J'avais la section de navigation "float :à droite" et le corps principal de la page a une image d'arrière-plan d'environ 250 px alignée à droite et "répétée".J'ai ensuite ajouté quelque chose avec "clear :les deux".Voici le W3Schools et le Propriété d'effacement CSS.

J'ai placé le clear au bas de la "page" classée div.La source de ma page ressemble à ceci.

body
 -> header (big blue banner)
 -> headerNav (green bar at the top)
 -> breadcrumbs (invisible at the moment)
 -> page
     -> navigation (floats to the right)
     -> content (main content)
         -> clear (the quote at the bottom)
         -> footerNav (the green bar at the bottom)
     -> clear (empty but still does something)
 -> footer (blue thing at the bottom)

J'espère que cela aide :)

Pas besoin d'écrire son propre CSS, il existe une bibliothèque appelée "Bootstrap css" en l'appelant dans votre section d'en-tête HTML, nous pouvons réaliser de nombreux styles, voici un exemple :Si vous souhaitez fournir deux colonnes d'affilée, vous pouvez simplement procéder comme suit :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-6">Content</div>
  <div class="col-md-6">Content</div>
</div>

Ici, md signifie appareil moyen, vous pouvez utiliser col-sm-6 pour les appareils plus petits et col-xs-6 pour les très petits appareils.

La réponse courte à votre question est que vous devez définir la hauteur de 100 % pour le corps et la balise html, puis définir la hauteur à 100 % sur chaque élément div pour lequel vous souhaitez que la hauteur de la page soit à 100 %.

Une mise en page à 2 colonnes est un peu difficile à utiliser en CSS (au moins jusqu'à ce que CSS3 soit pratique.)

Flotter à gauche et à droite fonctionnera jusqu'à un certain point, mais cela ne vous permettra pas d'étendre l'arrière-plan.Pour que les arrière-plans restent solides, vous devrez mettre en œuvre une technique connue sous le nom de « fausses colonnes », ce qui signifie essentiellement que vos colonnes elles-mêmes n'auront pas d'image d'arrière-plan.Vos 2 colonnes seront contenues à l’intérieur d’une balise parent.Cette balise parent reçoit une image d'arrière-plan contenant les 2 couleurs de colonne souhaitées.Rendez cet arrière-plan aussi grand que nécessaire (s'il s'agit d'une couleur unie, faites-en seulement 1 pixel de haut) et faites-le répéter.AListApart propose une excellente présentation de ce qui est nécessaire pour que cela fonctionne.

http://www.alistapart.com/articles/fauxcolumns/

Je peux penser à 2 options

  1. Utilisez javascript pour redimensionner la plus petite colonne lors du chargement de la page.
  2. Faux les hauteurs égales en réglant le background-color pour la colonne sur le conteneur <div/> plutôt (<div class="separator"/>) avec repeat-y

J'essaie juste d'aider ici pour que le code soit plus lisible.
N'oubliez pas que vous pouvez insérer des extraits de code en cliquant sur le bouton en haut avec "101010".Entrez simplement votre code puis mettez-le en surbrillance et cliquez sur le bouton.

Voici un exemple:

<html>
    <body>
    <style type="text/css">
        .rightfloat {
            color: red;
            background-color: #BBBBBB;
            float: right;
            width: 200px;
        }

        .left {
            font-size: 20pt;
        }

        .separator {
            clear: both;
            width: 100%;
            border-top: 1px solid black;
        }
    </style>

Cela devrait fonctionner pour vous :Réglez la hauteur à 100 % dans votre CSS pour le html et body éléments.Vous pouvez ensuite ajuster la hauteur selon vos besoins dans le div.

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
}

Il suffit d'utiliser la propriété CSS width faire cela.

Voici un exemple:

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>


.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top