Breite/Höhe als Prozentsatz minus Pixel einstellen

Question

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

Ich habe einen Container <div> für die ich die Höhe nicht festlegen möchte (da sie je nach Position auf der Website variiert), und darin befindet sich eine Kopfzeile <div> und dann eine unsortierte Liste von Elementen, die alle mit CSS versehen sind.

Es sieht in etwa so aus:

Ich möchte die unsortierte Liste um den verbleibenden Platz im Container auszunutzen <div> mit dem Wissen, dass die Kopfzeile <div> es 18px groß. Ich weiß nur nicht, wie ich die Höhe der Liste als "das Ergebnis von 100% minus 18px ".

Ich habe gesehen, dass diese Frage in ein paar anderen Zusammenhängen auf SO gestellt wurde, aber ich dachte, dass es sich lohnt, sie für meinen speziellen Fall erneut zu stellen. Hat jemand einen Rat in dieser Situation?

Answer 1

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

Bei mir hat es funktioniert!

Answer 2

Versuchen Sie es mit der Box-Größe. 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 die Kopfzeile:

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

Natürlich sollte der übergeordnete Container etwas haben wie:

position: relative;

Answer 3

Eine andere Möglichkeit, das gleiche Ziel zu erreichen: Flexboxen . Machen Sie den Container zu einer Flexbox für Spalten, dann haben Sie alle Freiheiten, einige Elemente mit fester Größe (Standardverhalten) oder zum Auffüllen/Schrumpfen auf den Containerraum (mit flex-grow:1 und flex-shrink:1) zuzulassen.

#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 vergrößern oder zu verkleinern, um den Effekt zu bemerken)

Hinweis: Sie können auch die Eigenschaft shorthand verwenden:

   flex:1 1 auto;

Answer 4

Ich habe einige der anderen Antworten ausprobiert, aber keine davon hat so funktioniert, wie ich es wollte. Unsere Situation war sehr ähnlich: Wir hatten einen Fensterkopf und das Fenster war in der Größe veränderbar, mit Bildern im Fensterkörper. Wir wollten das Seitenverhältnis der Größenänderung festhalten, ohne Berechnungen hinzufügen zu müssen, um die feste Größe der Kopfzeile zu berücksichtigen und das Bild trotzdem den Fensterkörper ausfüllen zu lassen.

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

Unserem Fensterelement haben wir einen Rand von 20px hinzugefügt, der zur Positionierung relativ zu anderen Elementen auf dem Bildschirm beiträgt, aber nicht zur "Größe" des Fensters. Die Kopfzeile des Fensters wird dann absolut positioniert (was sie aus dem Fluss der anderen Elemente entfernt, so dass sie nicht dazu führt, dass andere Elemente wie die ungeordnete Liste verschoben werden) und ihr oberer Rand wird auf -20px positioniert, was die Kopfzeile innerhalb des Randes des Fensters platziert. Schließlich wird unser ul-Element dem Fenster hinzugefügt, und die Höhe kann auf 100% gesetzt werden, was dazu führt, dass 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>

Answer 5

Danke, ich löste meine mit Ihrer Hilfe, zwicken es ein wenig, da ich ein div 100% Breite 100% Höhe (weniger Höhe einer unteren Leiste) und kein Scroll auf Körper (ohne Hack / Ausblenden von Bildlaufleisten) wollen.

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 tat den Trick, oh ja ich einen Wert wenig größer auf div.adjusted für unten als für untere Bar Höhe, sonst die vertikale Bildlaufleiste erscheint, ich angepasst, um den nächsten Wert sein.

Dieser Unterschied ist, weil eines der Elemente auf dynamischen Bereich ein zusätzliches unteres Loch hinzufügt, das ich nicht weiß, wie man loswerden... es ist ein Video-Tag (HTML5), bitte beachten Sie, dass ich dieses Video-Tag mit diesem CSS (so gibt es keinen Grund für es, ein unteres Loch zu machen, aber es tut) setzen:

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

Das objetive: Haben Sie ein Video, das die 100% des Browsers (und passt die Größe dynamisch, wenn der Browser geändert wird, aber ohne Änderung des Seitenverhältnisses) abzüglich einer unteren Raum, den ich für ein div mit einigen Texten, Schaltflächen, etc (und Validatoren w3c & css natürlich).

EDIT: Ich habe den Grund gefunden, Video-Tag ist wie Text, nicht ein Block-Element, so dass ich es mit diesem css behoben:

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

Beachten Sie die display:block; zum Video-Tag.