Dimensionnement de la colonne CSS

J'ai une page qui peut être redimensionnée en fonction du contenu. Ce dont j'ai besoin, c'est d'un moyen pour que les barres latérales augmentent/diminuent avec le corps, mais jamais à moins de 100% du corps visible.Dimensionnement de la colonne CSS

Initialement, la page semble bien, mais quand j'augmente le contenu, je peux voir un espace blanc sous les côtés gauche et droit, alors qu'il n'y en aurait pas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
     .container 
     { 
      background-color: Gray; 
      height: 100%; 
      width: 100%; 
      position: absolute; 
      clear: both; 
     } 
     .content 
     { 
      background-color: white; 
      width: 80%; 
      margin: 0 auto; 
      height: 100%; 
      min-height: 100%; 
     } 
    </style> 
    <script type="text/javascript" src="js/jquery-latest.js"></script> 
    <script language="javascript" type="text/javascript"> 
     function MakeBig() { 
      var html = ""; 
      for (var i = 0; i < 500; i++) { 
       html += "this is some random filler text<br/>"; 
      } 
      $("#textHolder").html(html); 
     } 

     function MakeSmall() { 
      var html = ""; 
      for (var i = 0; i < 5; i++) { 
       html += "this is some random filler text<br/>"; 
      } 
      $("#textHolder").html(html); 

     } 
    </script> 
</head> 
<body> 
    <div id="container" class="container"> 
     <div id="content" class="content"> 
      This is some text in the content 
      <button id="btnMakeBigDiv" onclick="MakeBig()">Increase Content</button><br/> 
      <button id="btnMakeSmallDiv" onclick="MakeSmall()">Decrease Content</button> 
      <div id="textHolder"></div> 
     </div> 
    </div> 
</body> 
</html>

Source

2009-11-17 John

Voici une méthode jQuery. Mais pas un pare-balles. Nous espérons que vous obtiendrez une idée ...

<style type="text/css"> 
    html { height: 100% } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     if(!($(window).height() < $(document).height())) { 
      $("#wrapper").css("height", "100%"); 
      $("#sidebar").css("height", "100%"); 
     } 
     $("#content").resize(function() { 
      if($("#content").height() > $(window).height()) 
       $("#sidebar").height($("#content").height()); 
     }); 
    }); 
</script> 

<div id="wrapper"> 
    <div id="sidebar"></div> 
    <div id="content"></div> 
</div>

Source

2009-11-17 10:13:27

J'ai essayé quelque chose comme ça dans le passé, mais le problème auquel je faisais face lorsque je réduisais le contenu, je n'avais aucun moyen de vérifier si la valeur du pixel était inférieure à 100% de la fenêtre. b.t.w Votre code ci-dessus ne fonctionne pas, mais c'était une bonne idée. – John

Je crois que ce que vous recherchez est position: fixed.

Il interdit fondamentalement le défilement pour supprimer un élément de l'écran. Autrement dit, vous pouvez faire défiler autant que vous le souhaitez, mais l'élément fixe ne bougera pas.

est ici que dans l'action avec votre page d'exemple:

// Sorry for the ".getElementById"'s thing, I didn't have jQuery 
 
function MakeBig() { 
 
    var html = ""; 
 
    for (var i = 0; i < 500; i++) { 
 
     html += "this is some random filler text<br/>"; 
 
    } 
 
    document.getElementById("textHolder").innerHTML = html; 
 
} 
 

 
function MakeSmall() { 
 
    var html = ""; 
 
    for (var i = 0; i < 5; i++) { 
 
     html += "this is some random filler text<br/>"; 
 
    } 
 
    document.getElementById("textHolder").innerHTML = html; 
 
}

body { 
 
    /* <body> has a default margin of 8px, let's remove that */ 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    clear: both; 
 
} 
 

 
.content { 
 
    background-color: white; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
/* Add 2 pseudo-elements inside .container */ 
 
.container::before, 
 
.container::after { 
 
    /* no text, only gray background */ 
 
    content: ""; 
 
    background-color: gray; 
 
    /* fixed positioning -> won't leave the screen after scroll */ 
 
    position: fixed; 
 
    /* 10% width -> main content has 80% width, that leaves 10% for each side */ 
 
    width: 10%; 
 
    /* 100% height, or 0px from top to 0px from bottom */ 
 
    top: 0; 
 
    bottom: 0; 
 
} 
 
.container::before { left: 0; } /* align to left */ 
 
.container::after { right: 0; } /* align to right */

<div id="container" class="container"> 
 
    <div id="content" class="content"> 
 
     This is some text in the content 
 
     <button id="btnMakeBigDiv" onclick="MakeBig()">Increase Content</button><br/> 
 
     <button id="btnMakeSmallDiv" onclick="MakeSmall()">Decrease Content</button> 
 
     <div id="textHolder"></div> 
 
    </div> 
 
</div>

Comme vous avez pu le constater, je ne change pas votre code HTML et touché à peine le JavaScript (uniquement pour remplacer le jQuery sélections avec JavaScript en vanille).

J'ai ajouté des commentaires sur le CSS pour expliquer le mieux possible ce qui était le but de tout. N'hésitez pas à demander des éclaircissements! J'espère que cela vous concerne, même après 7 ans! À votre santé!

Source

2017-03-04 23:25:19

Dimensionnement de la colonne CSS

Répondre

Questions connexes