colonnes css rétrécissement 100% valeur de pixel

J'ai une page qui est divisée en 3 divs, centre gauche et droite. Je ne veux rien afficher à gauche et à droite, ils encadrent juste la page.colonnes css rétrécissement 100% valeur de pixel

#leftDiv 
{ 
    background-color: Gray; 
    width: 10%; 
    left: 0px; 
    top: 0px; 
    position: absolute; 
    height: 100%; 
} 

#rightDiv 
{ 
    background-color: Gray; 
    height: 100%; 
    width: 10%; 
    left: 90%; 
    top: 0px; 
    position: absolute; 
    clear:both; 
}

Le centre div dispose d'une table qui permet à l'utilisateur de sélectionner le nombre de lignes à afficher. S'ils choisissaient une grande valeur, le corps de la table dépassait le bas de la div gauche et droite.

Pour corriger cela, je mis le code suivant dans

if ($("#leftDiv").length == 1) { 
       $("#leftDiv").height($("body").height() + "px"); 
      } 
      if ($("#rightDiv").length == 1) { 
       $("#rightDiv").height($("body").height() + "px"); ; 
      }

cela fonctionne bien jusqu'à ce que l'utilisateur sélectionne une valeur inférieure à la taille de la page, après avoir sélectionné une valeur plus grande. Ensuite, les divs gauche et droite sont réglés à moins de 100%. Ce dont j'ai besoin, c'est d'un moyen de savoir ce que 100% est en pixels et puis je peux comparer cela à la hauteur du corps et décider lequel est le plus grand.

Des idées?

Merci

John

Source

2009-11-16 John

Utilisez margin: 0 auto

Tuez vos colonnes de gauche et de droite, donnez votre principale div une largeur, puis centre que div en utilisant un auto gauche et la marge de droite. Par exemple:

#mainDiv { 
    width: 80%; 
    margin: 0 auto; 
}

Source

2009-11-16 16:13:36

Les trois solutions ont le problème, que mon mainDiv/content/center_div n'est pas dimensionné à 100% de la fenêtre. J'ai donc le fond gris le long de la taille et à mi-hauteur de la page. J'ai mis la min-height à 100%, mais ça n'a pas d'importance. Je crée un assistant qui a un contenu différent sur différentes pages. – John

Mettez l'arrière-plan sur la balise '' ou un autre div externe. –

Si les divs gauche et droite n'ont pas le contenu, alors il n'y a pas besoin pour eux d'être divs séparés: appliquer leur mise en forme à votre conteneur div au lieu et centrer le contenu de votre div à l'aide margin: 0 auto . Évidemment, vous devrez donner au conteneur div une largeur spécifiée et un arrière-plan non transparent. Ensuite, vous pouvez laisser le navigateur prendre soin de redimensionner la fenêtre au besoin - vous n'avez pas besoin de réinventer la roue pour cette partie.

CSS:

#container {background-color:gray;} 
#content {background-color:white;width:80%;margin:0 auto;}

Html:

... 
<body> 
<div id="container"> 
<div id="content"> 
...your content here... 
</div> 
</div> 
</body> 
...

(Si votre page ne dispose pas d'un conteneur div, vous pouvez appliquer la couleur de fond à l'élément de corps au lieu et économiser encore plus de code.)

Source

2009-11-16 16:15:53 Martha

Pourquoi créez-vous des éléments vides pour encadrer la page? Que diriez-vous mettre l'arrière-plan body à la couleur dont vous avez besoin et:

#center_div {width: /* whatever */; 
      margin: 0 auto; /* to center in the viewport */ 
      overflow: auto; /* or visible */ 
}

Vous pouvez laisser hors de la propriété overflow, et il suffit d'utiliser min-width à la place de width (je ne me souviens pas comment cross-browser compatible est ce) pour définir la largeur 'normale', de telle sorte que le contenu force le div à être plus grand que nécessaire pour afficher le contenu.

Source

2009-11-16 16:16:28

Je souhaite que les gens s'arrêtent et expliquent les votes négatifs, juste occasionnellement. Pour des coups de pied. Et pour que je puisse apprendre ce qui était trompeur, ou faux, dans ma réponse. –

colonnes css rétrécissement 100% valeur de pixel

Répondre

Questions connexes