1
votes

Hauteur div relative avec 100%

Comment définir la hauteur de la première colonne sur la deuxième colonne et la barre de défilement?

<div style="height:100%">
  <div class="menu-right">
    2
  </div>

  <div class="menu-right">
    sdsdsds
    <br /> sdsdsds
    <br /> . . //something such as sdsdsds . .
  </div>
</div>

body,
html {
  height: 100%;
  width: 100%
}

body {
  background-color: #F4F5F9;
  font-size: 11px;
}

.menu-right {
  min-height: 100%;
  background: red;
  width: 20px;
  display: block;
  position: relative;
  direction: rtl;
  float: right;
  margin-left: 10px;
}

Le résultat est le suivant:

html css alignment

0 commentaires

3 Réponses :

0
votes

Vous devez utiliser flex box au lieu de float . ajoutez une classe dans votre div externe comme .container , définissez la propriété d'affichage du .container sur flex et align-items: stretch

<div class="container" style="height:100%">
    <div class="menu-right">
      2
    </div>

    <div class="menu-right">
      sdsdsds
      <br />
      sdsdsds
      <br />
       .
       .
       //something such as sdsdsds
       .
       .
      </div>
</div>

body,html{height:100%;width:100%}
body{background-color:#F4F5F9;;font-size:11px}


.container {
  display: flex;
  align-items: stretch;
}

.menu-right {
  min-height: 100%;
  background: red;
  width: 20px;
  position: relative;
  direction: rtl;
  margin-left: 10px;
  flex: 0 0 20px;
  
}

1 commentaires

ne fonctionne pas, avec quelques br et sdsdsds la colonne rouge ne continuera pas

0
votes

ajouter le deuxième style div à droite overflow-y: scroll et max-height:100%

<div style="height:100%">
    <div class="menu-right">
      2
    </div>
    <div class="menu-right" style="overflow-y:scroll; max-height:100%">
      sdsdsds
      <br />
      sdsdsds
      <br />
       .
       .
       //something such as sdsdsds
       .
       .
      </div>

</div>

body,html{height:100%;width:100%}
body{background-color:#F4F5F9;;font-size:11px}
.menu-right {
  min-height: 100%;
  background: red;
  width: 20px;
  display: block;
  position: relative;
  direction: rtl;
  float: right;
  margin-left: 10px;
  
}

4 commentaires

Ne fonctionne pas, avec quelques br et sdsdsds, la colonne rouge ne continuera pas

En fait, je ne comprends pas ce que vous voulez, veuillez être précis. Dans votre exemple dans le premier div, il y a un nombre "2" et la colonne continue toujours. voulez-vous adapter le contexte et aussi quand son plus de défilement?

Dans la première image, il y a deux colonnes, je veux augmenter la hauteur de la première colonne, qui est "2", à la hauteur de la deuxième colonne. Vous avez utilisé overflow-y: scroll, qui a fait défiler la deuxième colonne, je veux définir la première colonne et la deuxième colonne sur la barre de défilement de la page.

regardez ici

2
votes

Au lieu de flottant vers la droite, vous pouvez utiliser une flexbox row-reverse comme élément wrapper. Le comportement par défaut align-items: stretch de la flexbox étendra et correspondra aux hauteurs - voir la démo ci-dessous:

<div class="wrapper">
  <div class="menu-left">
    sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
  </div>
  <div class="menu-right">
    sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
  </div>
</div>

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: #F4F5F9;
  font-size: 11px;
}

.wrapper {
  display: flex;
  flex-direction: row-reverse;
}

.wrapper>div {
  background: red;
  width: 100px;
  direction: rtl;
  margin-left: 10px;
}

1 commentaires