Div-Breite 100% minus feste Anzahl von Pixeln

Question

Wie kann ich die folgende Struktur erreichen, ohne Tabellen oder JavaScript zu verwenden? Die weißen Ränder stellen die Ränder von Divs dar und sind für die Frage nicht relevant.

Die Größe des Bereichs in der Mitte wird variieren, aber er wird exakte Pixelwerte haben und die gesamte Struktur sollte entsprechend dieser Werte skaliert werden. Um es zu vereinfachen, bräuchte ich einen Weg, um "100% - n px" Breite auf die oben-Mitte und unten-Mitte divs setzen.

Ich würde eine saubere, browserübergreifende Lösung begrüßen, aber falls das nicht möglich ist, reichen CSS-Hacks aus.

Hier ist ein Bonus. Eine weitere Struktur, mit der ich zu kämpfen habe und die mit Tabellen oder JavaScript endet. Es ist etwas anders, aber führt neue Probleme ein. Ich habe vor allem mit ihm in jQuery-basierte Windowing-System, aber ich möchte das Layout aus dem Skript zu halten und nur die Größe eines Elements (das mittlere) zu steuern.

Answer 1

Vielleicht bin ich ja dumm, aber ist der Tisch nicht die offensichtliche Lösung?

<div class="parent">
    <div class="fixed">
    <div class="stretchToFit">
</div>

.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}

Ein anderer Weg, den ich in Chrome gefunden habe, ist sogar noch einfacher, aber Mann, ist das ein Hacken!

.fixed{ 
   float: left
}
.stretchToFit{
   display: table-cell;
   width: 1%;
}

Dies allein sollte den Rest der Zeile horizontal ausfüllen, wie es bei Tabellenzellen der Fall ist. Allerdings erhalten Sie einige seltsame Probleme mit es geht über 100% der übergeordneten, Einstellung der Breite auf einen Prozentwert behebt es aber.

Answer 2

Wir können dies mit Flex-Box sehr einfach erreichen.

Wenn wir drei Elemente wie Header, MiddleContainer und Footer haben. Und wir wollen Header und Footer eine feste Höhe geben, dann können wir das so schreiben:

Für React/RN (Standardeinstellungen sind 'display' als flex und 'flexDirection' als column), in Web-Css müssen wir den Body-Container oder Container, der diese enthält, als display: 'flex', flex-direction: 'column' wie unten angeben:

    container-containing-these-elements: {
     display: flex,
     flex-direction: column
    }
    header: {
     height: 40,
    },
    middle-container: {
     flex: 1, // this will take the rest of the space available.
    },
    footer: {
     height: 100,
    }

Answer 3

Was, wenn Ihr Wrapping div war 100% und Sie verwendet Padding für einen Pixel Betrag, dann, wenn das Padding # muss dynamisch sein, können Sie leicht mit jQuery, um Ihre Padding Betrag ändern, wenn Ihre Ereignisse Feuer.

Answer 4

Ich hatte ein ähnliches Problem, bei dem ich ein Banner am oberen Rand des Bildschirms mit einem Bild auf der linken Seite und einem sich wiederholenden Bild auf der rechten Seite bis zum Rand des Bildschirms haben wollte. Am Ende habe ich das Problem so gelöst:

CSS:

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

Der Schlüssel war das richtige Etikett. Ich bin im Grunde angeben, dass ich es von 131px in von links nach 0px von rechts wiederholen möchten.

Answer 5

In manchen Kontexten können Sie die Randeinstellungen nutzen, um effektiv "100 % Breite minus N Pixel" anzugeben. Siehe die akzeptierte Antwort auf diese Frage .