Div Breite 100% minus feste Pixelanzahl

316

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.

Struktur 1

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.

Struktur 2

Removed_account
quelle
Für das zweite Element möchten Sie, dass die Höhe des mittleren Elements festgelegt wird, die anderen Elemente in der Nähe jedoch dynamisch sind
Casebash,

Antworten:

77

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;
}
Guffa
quelle
Dank dafür. Ich musste es ein bisschen an meine Situation anpassen. Das erste verschachtelte Div benötigte einen Rand rechts anstelle des Auffüllens, und das mittlere Div benötigte ebenfalls den gleichen rechten Rand.
Max
3
Tolle Lösung. nur eine Kleinigkeit -> das funktioniert, weil ".Header div div" ".Header div" überschreibt . Es sollte stattdessen ".Header> div" und ".Header> div> div" sein . In der Tat bedeutet ".Header div" jedes Div-Kind oder Sub-Div-Kind, während ".Header> div" nur direkte Kinder von .Header
Charles HETIER
@CharlesHETIER: Ja, das funktioniert auch und ist einfacher zu verwenden, da Sie nicht alle Einstellungen der weniger spezifischen Regel überschreiben müssen. Die Antwort wurde geschrieben, als die Unterstützung für den >Bediener noch nicht gut genug war, um zuverlässig zu sein.
Guffa
1
Dies ist veraltet, siehe die Antwort unten über die Calc-Funktion auf CSS.
Maria Arias de Reyna Domínguez
2
@ Delawen: Du musst eine Weile warten, bis es veraltet ist. Es gibt keine Unterstützung für calcIE 8 oder aktuelle Versionen von Anroid Browser oder Opera. caniuse.com/#search=calc
Guffa
760

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

rom_j
quelle
86
Die beste Antwort im Jahr 2013 IMHO. Die akzeptierte Antwort ist veraltet.
Donau Seemann
7
Es ist an der Zeit, dass jemand darauf stößt. Ich bin jetzt mit Hacks fertig, da ich das weiß. +1 @lechlukasz
preahkumpii
47
Nach 10 Jahren CSS-Kampf verdient diese Antwort +20000! Ich kann meinen Augen immer noch nicht trauen ...
Skobaljic
8
Alles was ich dazu sagen kann ist ... youtube.com/…
Jazz
5
Kompatibler? -> $ ('# yourEl'). css ('width', '100%'). css ('width', '- = 100px'); (jQuery)
sboy031
7

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!

Unislash
quelle
6

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:


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:

Manoj Kumar
quelle
3

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.

Bobince
quelle
3

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.

Jack Franzen
quelle
2

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,
    }
jayiitb
quelle
1

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.

dfasdljkhfaskldjhfasklhf
quelle
1

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.

Mike Carey
quelle
0

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

Chaos
quelle