web-dev-qa-db-fra.com

CSS HTML - Hauteur DIV remplir l'espace restant

J'ai donc une disposition comme celle-ci:

div {
  border: 1px solid
}
<div id="col_1" style="float:left;width:150px;">1</div>
<div id="col_2" style="float:left;width:100px;">2</div>
<div id="col_3" style="float:left;width:<REMAINING_WIDTH>;">3</div>

col_1 et col_2 occupent un espace fixe. Je veux que la troisième colonne en prenne le reste. Quelle est la meilleure façon de faire cela?

javascriptjqueryhtmlcsscss3
20
Andy Hin

Vous pouvez faire quelque chose de fou, abandonner le javascript et les contenus CSS3 pas tout à fait prêts pour des heures de grande écoute et utiliser le positionnement absolu.

Voir ce jsfiddle . Des points bonus pour bien se comporter lors du redimensionnement du navigateur.

#col_1 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100px;
  background-color: #eee;
}
#col_2 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 150px;
  left: 100px;
  background-color: #ccd;
}
#col_3 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 250px;
  right: 0px;
  background-color: #cdc;
}
<div id='col_1'>Column 1</div>
<div id='col_2'>Column 2</div>
<div id='col_3'>
  Column 3
</div>

27
FMM

Javascript est nécessaire pour cela. Si vous voulez que les 3 divs remplissent l’espace de la fenêtre (100%), vous devez utiliser javascript pour détecter la quantité d’espace disponible et attribuer la hauteur de col_3 en conséquence. Avec jQuery, vous pouvez faire

var one = $('#col_1').height(),
two = $('#col_2').height(), 
remaining_height = parseInt($(window).height() - one - two); 
$('#col_3').height(remaining_height);
9
Hussein

Vous avez déjà accepté une réponse, mais vous pouvez consulter CSS Flexbox, conçu pour résoudre ce problème précis sans recourir à des piratages "float: left". Cela fonctionne sur Chrome, Safari et FF (avec les préfixes -webkit et -moz). Pas encore sur IE.

Voici quelques liens rapides:

http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

http://www.w3.org/TR/css3-flexbox/

4
selbie

Vous avez besoin d'un contexte de formatage de bloc:

#c1,#c2 {
    background-color: red;
    float: left;
    width: 200px;
}
#c2 {
    background-color: green;
}
#c3 {
    background-color: yellow;
    height: 40px;
    overflow: auto;
}

c'est le débordement qui le fait fonctionner. Plus d'infos: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

2
rikkertkoppes

Voici quelque chose que j'ai pensé à utiliser certains CSS uniquement. Je l'ai testé dans FF12, GC18, SAF5.1 et IE 7,8,9,9CV.

.Clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.Clearfix {
  display: inline-block;
}
html[xmlns] .Clearfix {
  display: block;
}
* html .Clearfix {
  height: 1%;
}
#Wrapper {
  background-color: #FC20C9;
}
#col_1 {
  float: left;
  width: 150px;
  background-color: #FF0000;
}
#col_2 {
  float: left;
  width: 100px;
  background-color: #00CC00;
}
#col_3 {
  width: auto;
  float: none;
  background-color: #0066FF;
  overflow: hidden;
}
<div id="Wrapper" class="Clearfix">
  <div id="col_1">Lorem ipsum</div>
  <div id="col_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div id="col_3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
enter code here

2
INSURRECTION1ST

Si vous ciblez les navigateurs les plus récents, vous pouvez utiliser la fonction HTML5 calc

#col_3 {
  width: calc(100%-(100px+150px));
}
#red {
  border: 1px solid goldenrod;
}
div {
  border: 1px solid;
}
<div id="red">
  <div id="col_1" style="width:150px; float:left;">1</div>
  <div id="col_2" style="width:100px; float:left;">2</div>
  <div id="col_3">3</div>
</div>

0
Ruslan López

Utilisez jQuery pour calculer l’espace restant ou utilisez la boîte flexible css3 pour remplir l’espace restant:

http://www.html5rocks.com/tutorials/flexbox/quick/

diagram2 est le cas que vous voulez - la dernière boîte avec un maximum de 'box-flex' occupera l'espace restant (la boîte par défaut est 0

0
vincicat