web-dev-qa-db-fra.com

En CSS, comment obtenir une colonne de largeur fixe à gauche avec un tableau de droite qui utilise le reste de la largeur?

J'ai donc essayé de travailler avec l'évangile pur-CSS, ne jamais utiliser de tables pour la mise en page, vraiment. Mais après une quantité incroyable de douleur et d'angoisse, je suis sur le point d'abandonner. Je suis prêt à faire des efforts pour accomplir des choses en CSS, ne vous méprenez pas. Mais quand il semble que certaines des choses les plus simples qui peuvent être faites avec les tableaux de disposition sont tout à fait impossible en CSS, je me fiche que la pureté conceptuelle commence vraiment à battre.

Maintenant, il semble que je sois en colère, et je le suis; Je suis en colère contre mon temps perdu, je suis en colère contre les gens qui viennent de milieux QuarkXpress me remettant des conceptions inutiles à largeur fixe, je suis en colère contre la promesse manquée de CSS. Mais je n'essaie pas de commencer un argument; Je veux vraiment connaître la réponse à une question simple qui déterminera si je donne un autre essai à la pure CSS ou si je l'utilise et utilise des tableaux de disposition chaque fois que j'en ai envie. Parce que je détesterais revenir aux tableaux de disposition en pensant que cette chose est impossible si ce n'est pas le cas.

La question est la suivante: y a-t-il en tous cas utiliser une mise en page pure-CSS pour avoir une colonne à gauche, qui est de largeur fixe, et à droite de celle-ci placer un tableau de données, et faire en sorte que le tableau de données occupe proprement le reste de l'espace disponible? Autrement dit, la même disposition qui est facilement réalisable en ayant un tableau de disposition à deux cellules avec une largeur de 100% et une largeur fixe sur la cellule de gauche?

htmlcssliquid-layout
37
chaos
<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>

<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>

Cela devrait le faire (la mise en œuvre variera évidemment en fonction de son emplacement dans la page, mais je pense que c'est le concept que vous recherchez).

48
Derek H

Je pense que c'est ce que vous recherchez:

<table style='width: 100%;'>
  <tr>
    <td style='width: 200px;'></td>
    <td></td>
  </tr>
</table>

Remercie moi plus tard. = P

(Je plaisante évidemment .... en quelque sorte ...)

11
Paolo Bergantino

this est-ce que vous cherchez?

body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
}
#framecontent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  /*Width of frame div*/
  height: 100%;
  overflow: hidden;
  /*Disable scrollbars. Set to "scroll" to enable*/
  background: navy;
  color: white;
}
#maincontent {
  position: fixed;
  top: 0;
  left: 200px;
  /*Set left value to WidthOfFrameDiv*/
  right: 0;
  bottom: 0;
  overflow: auto;
  background: #fff;
}
.innertube {
  margin: 15px;
  /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body {
  /*IE6 hack*/
  padding: 0 0 0 200px;
  /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent {
  /*IE6 hack*/
  height: 100%;
  width: 100%;
}
<div id="framecontent">
    <div class="innertube">

      <h1>CSS Left Frame Layout</h1>
      <h3>Sample text here</h3>

    </div>
  </div>


  <div id="maincontent">
    <div class="innertube">

      <h1>Dynamic Drive CSS Library</h1>
      <p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
      </p>

    </div>
  </div>

Je ressens ta douleur, mais essaie de ne pas la regarder comme du temps perdu. Je suis sûr que vous avez une bien meilleure compréhension du CSS que vous ne l'aviez précédemment. Continuez à travailler avec lui et vous commencerez à voir les avantages. Personnellement, j'ai trouvé que CSS était une de ces choses qui demande beaucoup de pratique pour devenir compétent. J'utilise des présentations basées sur CSS depuis 5 ans et j'apprends toujours des trucs intéressants tous les jours.

10
Scott Muc

Pour garder cette question à jour, voici 5 façons de réaliser la même chose en utilisant CSS2 et CSS3.

Exemple 1: Flotteurs et marge

C'est ainsi que cela se fait depuis des années: simple et efficace.

#example1 .fixedColumn {
    width: 180px;
    float: left;
    background-color: #FCC;
    padding: 10px;
}
#example1 .flexibleColumn {
    margin-left: 200px;
    background-color: #CFF;
    padding: 10px;
}
<div id="example1">

    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

Exemple 2: CSS calc ();

calc() fonctionne à partir d'IE9 mais la prise en charge de certaines versions du navigateur Android est un peu floue: http://caniuse.com/#feat=calc

#example2.calc {
    overflow: hidden;
}
#example2.calc .fixedColumn {
    width: 180px;
    float: left;   
    background-color: #FCC;
    padding: 10px; 
}
#example2.calc .flexibleColumn {
    width: calc(100% - 220px); /*200px for the fixed column and 20 for the left and right padding */
    float: left;  
    background-color: #CFF;
    padding: 10px;
}
<div id="example2" class="calc">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

Exemple 3: affichage CSS sous forme de tableau

#example3.table {
    display: table;   
    width: 100%;
}
#example3.table .fixedColumn {
    width: 180px;
    display: table-cell;   
    background-color: #FCC;
    padding: 10px;   
}
#example3.table .flexibleColumn {    
    display: table-cell; 
    background-color: #CFF;
    padding: 10px;  
}
<div id="example3" class="table">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

Exemple 4: CSS3 Flexbox

Flexbox a un support étonnamment bon sur tous les navigateurs: http://caniuse.com/#search=flex

#example4.flex {
    display: flex;
}
#example4.flex .fixedColumn {
    width: 180px;
    background-color: #FCC;
    padding: 10px;  
}
#example4.flex .flexibleColumn {
    flex: 1 100%;
    flex-basis: auto;
    background-color: #CFF;
    padding: 10px; 
}
<div id="example4" class="flex">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

Exemple 5: grille CSS3

Pour le moment, les seuls navigateurs à prendre en charge une implémentation de grid de CSS3 sont IE10, IE11 et Edge (d'où les préfixes de navigateur -ms-), Alors assurez-vous de le voir dans l'un de ceux sinon il a gagné. t fonctionne correctement.

[~ # ~] modifier [~ # ~] J'ai inclus la spécification expérimentale chrome ici que vous pouvez voir en activant les fonctionnalités expérimentales dans Chrome qui est détaillé ici .

http://caniuse.com/#search=grid

#example5.grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 200px 1fr;
    -ms-grid-rows: auto;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto;
}
#example5.grid .fixedColumn {
    -ms-grid-column: 1;
    background-color: #FCC;
    padding: 10px;
}
#example5.grid .flexibleColumn {
    -ms-grid-column: 2;
    background-color: #CFF;
    padding: 10px;
}
<div id="example5" class="grid">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

Voici un codepen qui présente les 5 techniques:

2 colonnes (1 fixe, 1 flexible) 5 façons différentes!

4
Chris Spittles

Tout d'abord, je recommanderais les livres CSS d'Eric Meyer ainsi que la référence CSS sur le Web: A List Apart . J'utilise beaucoup le CSS dans mon travail et je pense que je suis devenu assez bon avec.

Cela étant dit: faites ce qui fonctionne. J'ai vécu exactement la douleur que vous venez de ressentir. Au final, j'ai pensé que ça ne valait pas la peine de compromettre mon design juste pour pouvoir dire que je n'avais pas utilisé de tables.

N'oubliez pas: vous n'êtes pas payé pour faire du CSS - vous êtes payé pour écrire un logiciel fonctionnel.

4
Mark Brittingham

Quelque chose comme ça:

<div style="position: relative; width: 100%">
    <div style="position: absolute; left: 0; top: 0; width: 200px">
        left column
    </div>
    <div style="position: absolute; left: 200px; top: 0">
         other stuff
    </div>
</div>

Bien sûr, vous devriez probablement mettre les styles dans une feuille de style distincte plutôt qu'en ligne. Et une seule colonne de largeur fixe à gauche est assez simple, mais parfois je vois d'autres mises en page qui peuvent être faites facilement avec des tableaux mais qui, pour autant que je sache, sont terriblement difficiles avec CSS.

1
David Z

Vous voudrez peut-être essayer ces derniers:

http://www.alistapart.com/stories/practicalcss/

http://www.w3.org/2002/03/csslayout-howto

Voici pourquoi:

http://en.wikipedia.org/wiki/Tableless_web_design

http://davespicks.com/essays/notables.html

Plus de procédures:

    div.row {
      clear: both;
      padding-top: 10px;
    }

    div.row span.label {
      float: left;
      width: 100px;
      text-align: right;
    }

    div.row span.formw {
      float: right;
      width: 335px;
      text-align: left;
    }


    <div style="width: 350px; background-color: #cc9;
      border: 1px dotted #333; padding: 5px;
      margin: 0px auto";>
      <form>
        <div class="row">
          <span class="label">Name:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Age:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Shoe size:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Comments:</span><span
              class="formw">
            <textarea cols="25" rows="8">
            Go ahead - write something...
            </textarea>
          </span>
        </div>
        <div class="spacer">
          &nbsp;
        </div>
      </form>
    </div>
1
Jobo

Il existe presque certainement une réponse qui consiste à appliquer display: table et display: table-cell aux éléments en question. C'est-à-dire ... non.

0
Sparr

J'adore la façon dont CSS prend toujours une page entière de code pour dupliquer quelques lignes d'utilisation d'une table.

Après avoir combattu la guerre CSS, je suis arrivé à la conclusion que "pure" est dans l'œil du spectateur et je suis passé à une approche "n'utilisons que ce qui fonctionne".

Utilisez CSS pour ce qu'il est bon: rendre les choses jolies. Utilisez DIV et SPAN lorsque vous le pouvez. Mais si vous vous retrouvez à passer une journée à essayer de faire en sorte que les choses s'alignent sur toutes les différentes versions du navigateur, alors claquez une table et continuez. Ne vous inquiétez pas, contrairement à ce que la plupart des gens semblent penser, un chiot ne mourra pas.

0
NotMe

Comme le dit Sparr, il existe des CSS qui répondent spécifiquement à cette exigence, car il n'est pas vraiment possible de le faire autrement sans divers compromis, éventuellement inacceptables, et c'est display:table, display:table-cell, etc.

Malheureusement, Internet Explorer avant Internet Explorer 8 ne prend pas en charge ces modes d'affichage, donc le problème n'est pas vraiment avec CSS mais avec une défaillance des navigateurs (en fait Internet Explorer, les autres vont bien) pour prendre en charge CSS de manière adéquate.

La bonne nouvelle est que cela est en train de changer, et en temps voulu, nous aurons une solution CSS appropriée. En attendant, choisissez l'un des compromis dans les autres réponses.

0
Alohci