Rechercher des informations sur la compatibilité du navigateur CSS pour définir la largeur à gauche et à droite

StackOverflow https://stackoverflow.com/questions/128241

Question

Voici une question qui me hante depuis un an maintenant. La question fondamentale est de savoir comment définir la taille d'un élément par rapport à son parent afin qu'il soit incrusté de N pixels de chaque bord. Définir la largeur serait bien, mais vous ne connaissez pas la largeur du parent et vous souhaitez que les éléments soient redimensionnés avec la fenêtre. (Vous ne voulez pas utiliser de pourcentage car vous avez besoin d'un nombre spécifique de pixels.)

Modifier Je dois également empêcher le contenu (ou le manque de contenu) d’étirer ou de réduire les deux éléments. La première réponse que j'ai obtenue a été d'utiliser du rembourrage sur le parent, ce qui fonctionnerait très bien. Je veux que le parent ait exactement 25% de largeur et à la même hauteur que la zone cliente du navigateur, sans que l'enfant puisse le pousser et obtenir une barre de défilement. / Modifier

J'ai essayé de résoudre ce problème en utilisant {top: Npx; left: Npx; bottom: Npx; right: Npx;} mais cela ne fonctionne que dans certains navigateurs.

Je pourrais potentiellement écrire du javascript avec jQuery pour corriger tous les éléments à chaque redimensionnement de page, mais cette solution ne me satisfait pas vraiment. (Et si je veux le décalage supérieur de 10 pixels, le minimum de 5 pixels? Cela devient compliqué.)

Ce que j'aimerais savoir, c'est soit comment résoudre ce problème de manière multi-navigateur, soit une liste de navigateurs permettant la solution CSS simple. Peut-être que quelqu'un a une astuce qui rend cela facile.

Était-ce utile?

La solution

Le le modèle de boîte CSS peut fournir des informations utiles pour Je suppose que vous n'allez pas réaliser une mise en page parfaite avec CSS uniquement.

Si je comprends bien, vous voulez que le parent ait 25% de largeur et soit exactement à la hauteur de la zone d’affichage du navigateur. Ensuite, vous voulez que l'enfant ait une largeur de 25% - 2n pixels et une hauteur de 100% -2n pixels avec n pixels entourant l'enfant. Aucune spécification CSS actuelle ne prend en charge ces types de calcul (bien que IE5, IE6 et IE7 utilisent des méthodes non standard prise en charge des expressions CSS et IE8 supprime la prise en charge pour les expressions CSS en mode IE8-standards).

Vous pouvez forcer le parent à utiliser 100% de la surface du navigateur et 25% de largeur, mais vous ne pouvez pas étendre la hauteur de l'enfant à la perfection en pixels ... 

<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>

... mais une barre de défilement horizontale apparaîtra. De plus, si le contenu est compressé, l'arrière-plan parent ne dépassera pas 100%. C’est peut-être l’exemple de remplissage que vous avez présenté dans la question elle-même.

Vous pouvez obtenir l'illusion que vous recherchez par le biais d'images et de divs supplémentaires, mais CSS seul, je ne crois pas, peut atteindre la perfection en pixels avec cette exigence de hauteur en place.

Autres conseils

Si vous ne vous préoccupez que de l'espacement horizontal, vous pouvez créer tous les éléments de bloc enfants au sein d'un élément de bloc parent: "insert". d'un certain montant en donnant à l'élément parent un rembourrage. Vous pouvez créer un seul élément de bloc enfant au sein d'un élément de bloc parent " inset " en donnant les marges des éléments. Si vous utilisez cette dernière approche, vous devrez peut-être définir une bordure ou un léger remplissage sur l’élément parent afin d’empêcher le repliement des marges.

Si vous êtes également préoccupé par l'espacement vertical, vous devez utiliser le positionnement. L'élément parent doit être positionné; si vous ne voulez pas le déplacer n'importe où, utilisez position: relative et ne vous souciez pas de définir en haut ou à gauche ; il restera où il est. Ensuite, vous utilisez le positionnement absolu sur l'élément enfant et définissez haut , droit , bas et gauche par rapport à bords de l'élément parent.

Par exemple: 

#outer {
    width: 10em;
    height: 10em;
    background: red;
    position: relative;
}

#inner {
    background: white;
    position: absolute;
    top: 1em;
    left: 1em;
    right: 1em;
    bottom: 1em;
}

Si vous souhaitez empêcher le contenu de développer la largeur d'un élément, vous devez utiliser la propriété overflow , par exemple, overflow: auto .

Appliquez simplement un remplissage à l’élément parent et aucune largeur à l’élément enfant. En supposant qu'ils soient tous deux display: block , cela devrait fonctionner correctement.

Ou inversement: définissez la marge de l'élément enfant.

Floatutorial est une excellente ressource pour ce genre de choses.

Essayez ceci: 

.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}

Il devrait y avoir un espace Npx sur tous les côtés, s’étendant pour remplir l’élément parent.

EDIT: Bien sûr, sur le parent, vous pouvez aussi utiliser 

{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top