CSS: Breite / Höhe als Prozentsatz minus Pixel einstellen

Ich versuche, einige wiederverwendbare CSS-Klassen für mehr Konsistenz und weniger Unordnung auf meiner Website zu erstellen, und ich versuche nicht, eine Sache zu standardisieren, die ich häufig verwende.

Ich habe einen Container <div>, für den ich die Höhe nicht festlegen möchte (da er je nach Standort auf der Site unterschiedlich ist). Darin befindet sich eine Kopfzeile <div>und dann eine ungeordnete Liste von Elementen, auf die CSS angewendet wird Sie.

Es sieht sehr ähnlich aus:

Ich mag , dass die ungeordnete Liste den verbleibenden Raum in dem Behälter nehmen <div>, wohl wissend , dass der Header <div>ist 18pxgroß. Ich weiß nur nicht, wie ich die Höhe der Liste als "Ergebnis von 100%Minus 18px" angeben soll .

Ich habe diese Frage in einigen anderen Kontexten zu SO gesehen, aber ich dachte, es lohnt sich, sie für meinen speziellen Fall erneut zu stellen. Hat jemand einen Rat in dieser Situation?

Mir ist klar, dass dies ein alter Beitrag ist, aber da er nicht vorgeschlagen wurde, ist es erwähnenswert, dass Sie Folgendes verwenden können, wenn Sie für CSS3-kompatible Browser schreiben calc:

height: calc(100% - 18px);

Es ist zu beachten, dass derzeit nicht alle Browser die Standardfunktion CSS3 calc () unterstützen. Daher kann die Implementierung der browserspezifischen Versionen der Funktion wie folgt erforderlich sein:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Für einen etwas anderen Ansatz könnten Sie so etwas in der Liste verwenden:

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

Dies funktioniert so lange wie der übergeordnete Container position: relative;

Ich benutze dafür Jquery

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

dann binde ich die Fenstergröße, um sie neu zu berechnen, wenn die Größe des Browserfensters geändert wird (wenn sich die Größe des Containers mit der Größe des Fensters ändert)

$(window).resize(function() { setSizes(); });

Definieren Sie die Höhe nicht als Prozent, sondern stellen Sie einfach das top=0und bottom=0wie folgt ein:

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}

Vorausgesetzte 17px-Headerhöhe

Liste CSS:

height: 100%;
padding-top: 17px;

Header CSS:

height: 17px;
float: left;
width: 100%;

1. Verwenden Sie negative Ränder für das Element, für das Sie Pixel abziehen möchten. (gewünschtes Element)
2. Machen Sie overflow:hidden;auf dem enthaltenden Element
3. Schalten Sie overflow:auto;das gewünschte Element ein.

Es hat bei mir funktioniert!

Versuchen Sie es mit Box-Sizing. Für die Liste:

height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;

Für den Header:

position: absolute;
left: 0;
top: 0;
height: 10px;

Natürlich sollte der übergeordnete Container Folgendes haben:

position: relative;

Ein anderer Weg, um das gleiche Ziel zu erreichen: Flexboxen . Machen Sie den Container zu einer Spaltenflexbox, und Sie haben dann die Freiheit, einigen Elementen eine feste Größe (Standardverhalten) zu erlauben oder den Containerraum aufzufüllen / zu verkleinern (mit flex-grow: 1 und flex-). schrumpfen: 1).

#wrap {        
  display:flex;
  flex-direction:column;
}
.extendOrShrink {
  flex-shrink:1;
  flex-grow:1;
  overflow:auto;
}

Siehe https://jsfiddle.net/2Lmodwxk/ (versuchen Sie, das Fenster zu erweitern oder zu verkleinern, um den Effekt zu bemerken).

Hinweis: Sie können auch die Shorthand-Eigenschaft verwenden:

   flex:1 1 auto;

Ich habe einige der anderen Antworten ausprobiert, und keine davon hat so funktioniert, wie ich es wollte. Unsere Situation war sehr ähnlich, als wir einen Fensterkopf hatten und die Größe des Fensters mit Bildern im Fensterkörper geändert werden konnte. Wir wollten das Seitenverhältnis der Größenänderung sperren, ohne Berechnungen hinzufügen zu müssen, um die feste Größe des Headers zu berücksichtigen, und das Bild sollte dennoch den Fensterkörper füllen.

Unten habe ich ein sehr einfaches Snippet erstellt, das zeigt, was wir letztendlich gemacht haben. Es scheint für unsere Situation gut zu funktionieren und sollte mit den meisten Browsern kompatibel sein.

Bei unserem Fensterelement haben wir einen 20-Pixel-Rand hinzugefügt, der zur Positionierung relativ zu anderen Elementen auf dem Bildschirm beiträgt, aber nicht zur "Größe" des Fensters beiträgt. Die Fensterüberschrift wird dann absolut positioniert (wodurch sie aus dem Fluss anderer Elemente entfernt wird, sodass andere Elemente wie die ungeordnete Liste nicht verschoben werden), und ihre Oberseite wird mit -20 Pixel positioniert, wodurch die Überschrift innerhalb des Randes platziert wird des Fensters. Schließlich wird unser ul-Element zum Fenster hinzugefügt, und die Höhe kann auf 100% eingestellt werden, wodurch es den Körper des Fensters ausfüllt (ohne den Rand).

*,*:before,*:after
{
  box-sizing: border-box;
}

.window
{
  position: relative;
  top: 20px;
  left: 50px;
  margin-top: 20px;
  width: 150px;
  height: 150px;
}

.window-header
{
  position: absolute;
  top: -20px;
  height: 20px;
  border: 2px solid black;
  width: 100%;
}

ul
{
  border: 5px dashed gray;
  height: 100%;
}

<div class="window">
  <div class="window-header">Hey this is a header</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

Danke, ich habe meine mit Ihrer Hilfe gelöst und ein wenig optimiert, da ich eine Div 100% Breite 100% Höhe (weniger Höhe einer unteren Leiste) und keine Schriftrolle am Körper (ohne Hack / Verstecken von Schriftrollen) möchte.

Für CSS:

 html{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 body{
  position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 div.adjusted{
  position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
 }
 div.the_bottom_bar{
  width:100%;height:31px;margin:0px;border:0px;padding:0px;
}

Für HTML:

<body>
<div class="adjusted">
 // My elements that go on dynamic size area
 <div class="the_bottom_bar">
  // My elements that goes on bottom bar (fixed heigh of 31 pixels)
 </div>  
</div>  

Das hat den Trick gemacht, oh ja, ich habe einen etwas größeren Wert auf div gesetzt. Angepasst für den unteren als für die untere Balkenhöhe, sonst erscheint die vertikale Bildlaufleiste, ich habe den nächstgelegenen Wert angepasst.

Dieser Unterschied liegt darin, dass eines der Elemente im dynamischen Bereich ein zusätzliches unteres Loch hinzufügt, das ich nicht entfernen kann ... es ist ein Video-Tag (HTML5). Bitte beachten Sie, dass ich dieses Video-Tag mit diesem CSS ( Es gibt also keinen Grund dafür, ein unteres Loch zu machen, aber es tut es):

 video{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

Das Ziel: Haben Sie ein Video, das 100% des Browers einnimmt (und die Größe dynamisch ändert, wenn die Größe des Browsers geändert wird, ohne das Seitenverhältnis zu ändern), abzüglich eines unteren Bereichs, den ich für ein Div mit einigen Texten, Schaltflächen usw. (und Validatoren) verwende w3c & css natürlich).

EDIT: Ich habe den Grund gefunden, Video-Tag ist wie Text, kein Blockelement, also habe ich es mit diesem CSS behoben:

 video{
  display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

Beachten Sie das display:block;Video-Tag.

Ich bin nicht sicher, ob dies in Ihrer speziellen Situation funktioniert, aber ich habe festgestellt, dass das Auffüllen des inneren Divs den Inhalt innerhalb eines Divs herumschiebt, wenn das enthaltende Div eine feste Größe hat. Sie müssten entweder schweben oder Ihr Header-Element absolut positionieren, aber ansonsten habe ich dies nicht für Divs mit variabler Größe versucht.