CSS Browser-Kompatibilität der Suche nach Informationen zur Einstellung WIDTH links und rechts

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

Frage

Hier ist eine Frage, die mich seit einem Jahr ist schon spukt. Die Wurzel Frage ist, wie kann ich die Größe eines Elements relativ zu seinem übergeordneten so dass sie durch N Pixel von jeder Kante nach innen versetzt liegt? die Breite Einstellung wäre schön, aber Sie wissen nicht, die Breite der Eltern, und Sie wollen, dass die Elemente mit dem Fenster ändern. (Sie wollen nicht, Prozent verwenden, da Sie eine bestimmte Anzahl von Pixeln benötigen.)

Bearbeiten Ich brauche auch den Inhalt (oder fehlende Inhalte) zu verhindern, Dehnung oder beiden Elemente schrumpfen. Erste Antwort, die ich bekam, war padding zu verwenden, um auf die Eltern, die große funktionieren würde. Ich mag, dass die Eltern genau 25% breit sein, und genau die gleiche Höhe wie der Browser-Client-Bereich, ohne das Kind es in der Lage zu schieben und eine Bildlaufleiste zu bekommen. / Bearbeiten

Ich habe versucht, dieses Problem zu lösen mit {top: Npx; links: Npx; unten: Npx; rechts: Npx;} aber es funktioniert nur in bestimmten Browsern

.

Ich könnte möglicherweise einige Javascript mit jQuery schreibe alle Elemente mit jeder Seite Resize zu beheben, aber ich bin nicht wirklich glücklich mit dieser Lösung. (Was passiert, wenn ich die Spitze von 10px versetzt will, aber der Boden nur 5px? Es wird kompliziert.)

Was ich möchte wissen, ist entweder, wie diese in einer Cross-Browser-Art und Weise zu lösen, oder eine Liste des Browser, das eine einfache CSS-Lösung ermöglichen. Vielleicht hat jemand da draußen hat einen Trick, dies einfach macht.

War es hilfreich?

Lösung

Die Das CSS-Box-Modell Einblick bieten könnte für Sie, aber meine Vermutung ist, dass Sie gehen nicht allein pixelgenaue Layout mit CSS zu erreichen.

Wenn ich richtig verstehe, wollen Sie die Eltern 25% breit und genau die Höhe des Browser-Anzeigebereich zu sein. Dann mögen Sie das Kind 25% sein - 2n Pixel breit und 100% -2n Pixel in der Höhe mit n Pixeln, die das Kind umgeben. Keine aktuelle CSS-Spezifikation enthält diese Art von Berechnungen unterstützen (obwohl IE5, IE6 und IE7 haben Nicht-Standard Unterstützung für CSS Ausdrücke und IE8 sinkt Unterstützung CSS-Ausdrücke in IE8-Standards-Modus).

Sie können die Eltern zwingen, zu 100% des Browser-Bereich und 25% breit, aber Sie können die Größe des Kindes mit diesem zu Pixel Perfektion nicht strecken ... 

<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>

... aber eine horizontale Bildlaufleiste angezeigt. Auch wenn der Inhalt zusammengedrückt wird, wird die Mutter Hintergrund nicht über 100% erweitern. Dies ist vielleicht die padding Beispiel Sie in der Frage selbst vorgestellt.

Sie können die Illusion erreichen , die Sie durch die Bilder und zusätzliche divs suchen sind, sondern CSS allein, ich glaube nicht, können Pixel Perfektion mit dieser Höhe Anforderung an Ort und Stelle erreichen.

Andere Tipps

Wenn Sie nur mit horizontalem Abstand sind, dann können Sie alle untergeordneten Block-Elemente machen in einem übergeordneten Blockelement „Einschub“ um einen bestimmten Betrag durch die Polsterung übergeordnetes Elements zu geben. Sie können, indem die Elementränder innerhalb eines übergeordneten Blockelement „Einsatz“ ein einzelnes Kind Blockelement machen. Wenn Sie den zweiten Ansatz verwenden, müssen Sie einen Rahmen oder eine leichte Polsterung an das übergeordnete Element setzen Marge Kollabieren zu verhindern.

Wenn Sie mit vertikalem Abstand betroffen sind als gut, dann müssen Sie Positionierung verwenden. Das Mutterelement muss positioniert werden; wenn Sie es nicht überall bewegen wollen, dann position: relative verwenden und nicht die Mühe top oder left Einstellung; es wird dort bleiben, wo sie ist. Dann nutzen Sie die absolute Positionierung auf dem Kind-Elemente, und legen Sie top, right, bottom und left relativ zu den Kanten des übergeordneten Elements.

Zum Beispiel: 

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

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

Wenn Sie Inhalte vermeiden wollen, von der Breite eines Elements erweitert, dann sollten Sie die overflow Eigenschaft verwenden, zum Beispiel overflow: auto.

Tragen Sie einfach einige Polsterung an das Mutterelement und keine Breite auf das Kind-Element. Unter der Annahme, sie sind beide display:block, das sollte funktionieren.

oder die andere Art und Weise umgehen. Stellen Sie die margin des Kindes-Element

Floatutorial ist eine großartige Ressource für Sachen wie diese.

Versuchen Sie folgendes: 

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

Es sollte eine Npx auf allen Seiten hat, Stretching das übergeordnete Element zu füllen.

EDIT: Natürlich auf den Eltern, können Sie auch verwenden 

{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top