Homepage selbermachen 7.846 Themen, 35.563 Beiträge

Verfolgung starten Optionen

CSS: So etwas wie width: 100%-1px;

Yves3 / 3 Antworten / Flachansicht Nickles

Hallo,

Bekanntlicherweise wird der Border bei einem Element zu seiner Breite (width) hinzuaddiert. Ich habe jetzt ein Inputfeld in einem div, das inklusive Border genau die Breite dieses divs ausfüllen soll. Ganz der CSS Spezifikation entsprechend wird aber der Border zu den 100% hinzuaddiert und die Inputbox ist schlussendlich breiter als das div, in dem sie drin ist.
Wenn ich die Breite einfach auf 99% setze, dann sieht das bei mir zwar korrekt aus, bei einem grösseren Bildschirm könnte das aber schon nicht mehr stimmen. Eine weitere Möglichkeit wäre ein zusätzliches div ohne vorgegebene Breite, das einzig und allein als Rand dient.

Gibt es da einen sauberen Weg, oder muss ich so einen ähnlichen Hack wie oben beschrieben verwenden?

EDIT: Der Hack mit dem zusätzlichen Div funktioniert scheinbar bei Input-Boxen nicht.
Das muss doch irgendwie machbar sein :(

bei Antwort benachrichtigen
wlaner Yves3 „CSS: So etwas wie width: 100%-1px;“
Optionen

Wie wärs wenn du dem div nen Rahmen gibst und das Inputfeld ohne Rahmen auf 100% setzt?

(Oder versteh ich dich da jetzt nicht richtig...?)
<div style="width:198px; border:1px solid #000;"&gt:
 <input type="text" style="width:100%;" />
</div>


WL

bei Antwort benachrichtigen
So geht s, Danke : Dass ich da noch nicht drauf gekommen bin... hab schon ... Yves3
Wenn du den Doctype entfernst, rendert der Browser im Quirks-Mode. Dann ist ... Zaphod