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

Ein neuer Weg, über den ich gerade gestolpert bin: css calc() :

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

Quelle: css Breite 100% minus 100px

Answer 2

Sie können verschachtelte Elemente und Auffüllungen verwenden, um einen linken und rechten Rand der Symbolleiste zu erhalten. Die Standardbreite einer div Element ist auto , d. h. es wird die verfügbare Breite genutzt. Sie können dem Element dann eine Auffüllung hinzufügen und es bleibt innerhalb der verfügbaren Breite.

Hier ist ein Beispiel, das Sie verwenden können, um Bilder als linke und rechte abgerundete Ecken und ein mittleres Bild zu platzieren, das sich zwischen ihnen wiederholt.

Das HTML:

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

Der 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;
}

Answer 3

Während die Antwort von Guffa in vielen Situationen funktioniert, möchten Sie in manchen Fällen vielleicht nicht, dass die linken und/oder rechten Teile des Paddings das übergeordnete Element des mittleren Divs sind. In diesen Fällen können Sie einen Blockformatierungskontext für das mittlere Div verwenden und die Padding-Divs nach links und rechts verschieben. Hier ist der Code

Das HTML:

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

Der 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 denke, dass diese Elementhierarchie im Vergleich zu verschachtelten Divs natürlicher ist und besser darstellt, was auf der Seite ist. Aus diesem Grund können Ränder, Auffüllungen und Abstände normal auf alle Elemente angewendet werden (d. h. diese "Natürlichkeit" geht über den Stil hinaus und hat Auswirkungen).

Beachten Sie, dass dies nur bei divs und anderen Elementen funktioniert, die die Eigenschaft "füllt standardmäßig 100 % der Breite" haben. Für Eingaben, Tabellen und möglicherweise andere Elemente müssen Sie sie in ein Container-Div einpacken und ein wenig 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 die Css ausgraben.

jsfiddle hier: jsfiddle.net/RgdeQ

Viel Spaß!

Answer 4

Sie können Folgendes nutzen Flexbox Layout. Sie müssen Folgendes einstellen flex: 1 auf das Element, das eine dynamische Breite oder Höhe haben muss für flex-direction: row and column beziehungsweise.

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*/
}

Sortie :

.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*/
}

Sortie :

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

Answer 5

Die übliche Vorgehensweise ist, wie von Guffa beschrieben, verschachtelte Elemente. Es ist ein bisschen traurig, dass man zusätzliches Markup hinzufügen muss, um die Haken zu bekommen, die man dafür braucht, aber in der Praxis wird ein Wrapper-Div hier oder dort niemandem schaden.

Wenn Sie ohne zusätzliche Elemente auskommen müssen (z. B. wenn Sie keine Kontrolle über die Seitenauszeichnung haben), können Sie Box-Sizing , das eine recht gute, aber nicht vollständige oder einfache Browserunterstützung bietet. Wahrscheinlich macht es mehr Spaß, als sich auf Skripting zu verlassen.