web-dev-qa-db-fra.com

Deux colonnes flottantes - une fixe, une large

J'ai regardé autour de SO, mais je ne trouve pas celui qui correspond à mon occurrence, j'ai essentiellement deux colonnes, une largeur fixe (185 px) et l'autre colonne n'a pas de largeur fixe, mais j'ai besoin de la dernière colonne pour remplir le dernier espace, par exemple.

...........................................
.---------  ------------------------------.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  ------------------------------.
.+       +                                .
.+       +                                .
.+       +                                .
.---------                                .
...........................................

La première colonne doit toujours être à 100% vers le bas lorsque la deuxième colonne remplit la largeur restante, elles sont toutes les deux flottantes left, si je redimensionne la fenêtre du navigateur, la deuxième colonne apparaît sous la première colonne. J'ai besoin de la deuxième colonne pour remplir la largeur restante et être flexible lors du redimensionnement de la fenêtre du navigateur.

htmlcsscss-float
40
MacMac

Jetez un œil à this . Il n'y a pas de démos, mais j'ai déjà utilisé des tutoriels de ce type, donc je suppose que cela fonctionne bien. Je déduis de l'article que le contenu principal est liquide. Le contenu latéral peut également être liquide, mais je pense que vous pouvez simplement lui donner une largeur fixe et le laisser ainsi. L'astuce consiste à placer le contenu principal en premier.

2
Zomxilla

Il existe en fait un moyen plus simple de le faire que d'utiliser des flotteurs:

.container {
    position: relative;
}

.left {
    width: 185px;
    position: absolute;
    top: 0;
    left: 0;
}

.right {
    margin-left: 185px;
}
64
Jacob

En utilisant des marges négatives à partir de ce tutoriel le CSS peut ressembler à ceci

html, body, .container {
    height:100%;
    padding:0;
    margin:0;
}
.container {
    min-width: 300px;
}
.left {
    float:left;
    width: 185px;
    margin-right: -185px;
    height:100%;
}
.right {
    margin-left:185px;
}

http://jsfiddle.net/Y5FAT/1/

http://jsfiddle.net/Y5FAT/

8
Stano

Modification de la solution, cette fois en utilisant flexbox, correction de la colonne de gauche en utilisant flex: 185px 0 0; a ensuite fait croître automatiquement la colonne de droite à l'aide de flex-grow:1

*{
  box-sizing: border-box;
}

body{
  padding:0;
  margin:0;
}

#container{
  display:flex;
}

#left{
  height: 100vh;
  flex: 185px 0 0;
  background-color:tomato;
}

#right{
  flex-grow: 1;
}

#right > div{
  background:pink;
}
  <body>
    <div id="container">
      <div id="left"> Left </div>
      <div id="right">
        <div>
        Right <br/>
        dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf  dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf 
        </div>
      </div>
    </div>
  </body>
6
Gerard Banasig

La "position: absolue;" la réponse est assez bonne, mais elle a des implications inter-navigateurs, surtout si vous développez pour IE. La meilleure façon d'y parvenir est la suivante:

<html>
<head>
<style>
    div.right {
        float: right;
        width: 200px;
    }
    div.left {
        margin-right: 200px;
    }
    div.clear {
        clear: both;
    }
</style>
</head>
<body>
    <div class="right"><!--your code here--></div>
    <div class="left"><!--your code here--></div>
    <div class="clear"></div>
</body>
</html>

Veuillez noter que le div dont vous avez besoin sur le côté droit est appelé en premier dans le code HTML. Notez également la suppression du flottant après les colonnes, ce qui sera utile si vous avez du contenu ci-dessous ou s'il existe un conteneur parent.

2
Delgado Bonito

J'avais essayé presque toutes les solutions ci-dessus jusqu'à ce que je tombe dessus, et cela fonctionne à merveille pour moi. Comment faire un div pour remplir un espace horizontal restant (un problème très simple mais ennuyeux pour les experts CSS)

Je ne sais pas pourquoi, il semble que vous ayez seulement besoin de faire flotter la colonne qui a une largeur fixe. Le reste tombe juste en place.

1
Mars Mellow

Si vous ne voulez utiliser ni flotteurs ni positionnement absolu, le plus simple que j'ai pu trouver était

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        white-space: nowrap;
      }
      div.left {
        display: inline-block;
        width: 200px;
        white-space: normal;
        background-color: red;
        vertical-align: top;
      }
      div.right {
        display: inline-block;
        white-space: normal;
        background-color: green;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div class="left">
      left
    </div>
    <div class="right">
      right
    </div>
  </body>
</html>
1
Sebastian

Eh bien, la réponse approuvée est bonne, mais pour ceux qui recherchent plus, voici un lien. Espérant que ceci puisse t'être utile. ;)

http://www.dynamicdrive.com/style/layouts/category/C13/

1
Andrei Surdu