Div Breite 100% minus feste Pixelanzahl

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

Die Größe des Bereichs in der Mitte wird variieren, es werden jedoch genaue Pixelwerte angezeigt, und die gesamte Struktur sollte entsprechend diesen Werten skaliert werden. Um es zu vereinfachen, müsste ich die Breite "100% - n px" auf die oberen, mittleren und unteren mittleren Divs einstellen.

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

Hier ist ein Bonus. Eine andere Struktur, mit der ich zu kämpfen habe und die am Ende Tabellen oder JavaScript verwendet. Es ist etwas anders, bringt aber neue Probleme mit sich. Ich habe es hauptsächlich in jQuery-basierten Fenstersystemen verwendet, aber ich möchte das Layout aus dem Skript heraushalten und nur die Größe eines Elements (des mittleren) steuern.

Sie können verschachtelte Elemente und Auffüllungen verwenden, um einen linken und rechten Rand in der Symbolleiste zu erhalten. Die Standardbreite eines divElements ist auto, dh es verwendet die verfügbare Breite. Sie können dem Element dann eine Auffüllung hinzufügen, die weiterhin in der verfügbaren Breite bleibt.

Hier ist ein Beispiel, das Sie verwenden können, um Bilder als linke und rechte abgerundete Ecken und ein zentriertes Bild, das sich zwischen ihnen wiederholt, einzufügen.

Der HTML:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

Das CSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}

Neuer Weg, auf den ich gerade gestoßen bin: csscalc() :

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

Quelle: CSS-Breite 100% minus 100px

Während Guffas Antwort in vielen Situationen funktioniert, möchten Sie in einigen Fällen möglicherweise nicht, dass das linke und / oder rechte Polsterteil das übergeordnete Element des mittleren Divs ist. In diesen Fällen können Sie einen Blockformatierungskontext in der Mitte verwenden und die Padding-Divs nach links und rechts verschieben. Hier ist der Code

Der HTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

Das CSS:

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

Ich bin der Meinung, dass diese Elementhierarchie im Vergleich zu verschachtelten verschachtelten Divs natürlicher ist und besser darstellt, was auf der Seite steht. Aus diesem Grund können Ränder, Polster und Ränder normal auf alle Elemente angewendet werden (dh: Diese „Natürlichkeit“ geht über den Stil hinaus und hat Auswirkungen).

Beachten Sie, dass dies nur für Divs und andere Elemente funktioniert, die die Eigenschaft "Standardmäßig 100% der Breite füllen" gemeinsam nutzen. Für Eingaben, Tabellen und möglicherweise andere müssen Sie sie in ein Container-Div einschließen und etwas mehr CSS hinzufügen, um diese Qualität wiederherzustellen. Wenn Sie das Pech haben, in dieser Situation zu sein, kontaktieren Sie mich und ich werde das CSS ausgraben.

jsfiddle hier: jsfiddle.net/RgdeQ

Genießen!

Sie können das Flexbox- Layout verwenden. Sie müssen flex: 1das Element festlegen, für das eine dynamische Breite bzw. Höhe erforderlich ist flex-direction: row and column.

Dynamische Breite:

HTML

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-width {
  width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
  flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}

Ausgabe:

.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-family: Roboto;
}
.fixed-width {
  background: #9BCB3C;
  width: 200px; /* Fixed width */
  text-align: center;
}
.flexible-width {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
}

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>

</div>

Dynamische Höhe:

HTML

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-height {
  height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
  flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}

Ausgabe:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  font-family: Roboto;
}
.fixed-height {
  background: #9BCB3C;
  height: 50px; /* Fixed height or flex-basis: 100px */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexible-height {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>

</div>

Die übliche Vorgehensweise wird von Guffa, verschachtelten Elementen, beschrieben. Es ist ein bisschen traurig, zusätzliche Markups hinzufügen zu müssen, um die Haken zu bekommen, die Sie dafür benötigen, aber in der Praxis wird ein Wrapper-Div hier oder da niemanden verletzen.

Wenn Sie dies ohne zusätzliche Elemente tun müssen (z. B. wenn Sie keine Kontrolle über das Seitenmarkup haben), können Sie die Box-Größe verwenden , die eine recht anständige, aber nicht vollständige oder einfache Browserunterstützung bietet. Wahrscheinlich mehr Spaß, als sich auf Skripte verlassen zu müssen.

Vielleicht bin ich dumm, aber ist Tisch hier 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 Chrom herausgefunden habe, ist noch einfacher, aber Mann, es ist ein Hack!

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

Dies allein sollte den Rest der Zeile horizontal ausfüllen, wie es Tabellenzellen tun. Es treten jedoch einige seltsame Probleme auf, wenn es über 100% des übergeordneten Elements hinausgeht. Wenn Sie die Breite auf einen Prozentwert festlegen, wird dies jedoch behoben.

Dies können wir mit Flex-Box sehr einfach erreichen.

Wenn wir drei Elemente wie Header, MiddleContainer und Footer haben. Und wir möchten Kopf- und Fußzeile eine feste Höhe geben. dann können wir so schreiben:

Für React / RN (Standardeinstellungen sind "Anzeige" als Flex und "FlexDirection" als Spalte) müssen wir in Web-CSS den Body-Container oder Container, der diese enthält, als Anzeige angeben: "Flex", Flex-Richtung: "Spalte". Wie unten:

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

Was ist, wenn Ihr Wrapping-Div 100% war und Sie das Auffüllen für eine Pixelmenge verwendet haben? Wenn das Auffüllen # dynamisch sein muss, können Sie mit jQuery einfach das Auffüllen ändern, wenn Ihre Ereignisse ausgelöst werden.

Ich hatte ein ähnliches Problem, bei dem ich ein Banner oben auf dem Bildschirm mit einem Bild links und einem sich wiederholenden Bild rechts am Bildschirmrand haben wollte. Am Ende habe ich es 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 gebe im Grunde an, dass ich möchte, dass es von 131 Pixel von links auf 0 Pixel von rechts wiederholt wird.

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