CSS: Einstellung Breite / Höhe als Prozentsatz minus Pixel
https://stackoverflow.com/questions/2434602
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich versuche, einige wiederverwendbaren CSS-Klassen für mehr Konsistenz und weniger Unordnung auf meiner Website zu erstellen, und ich bin fest zu versuchen, eine Sache, die ich häufig verwenden zu standardisieren.
Ich habe einen Container <div> dass ich will nicht die Höhe einzustellen für (weil es variiert je nachdem, wo auf der Seite, es ist), und in ihm ist ein Header <div>, und dann ein ungeordnete Liste von Elementen, die alle mit CSS auf sie angewendet.
Es sieht viel wie diese:
Ich mag die ungeordnete Liste , um den verbleibenden Raum in dem Behälter <div> aufzunehmen, wohl wissend, dass der Header <div> ist 18px hoch. Ich weiß nur nicht, wie die Liste der Höhe angeben, als „das Ergebnis von minus 100% 18px“.
Ich habe diese Frage in ein paar anderen Kontexten auf SO fragte gesehen, aber ich dachte, es lohnt sich zu fragen für meine speziellen Fall wieder sein würde. Hat jemand einen Rat in dieser Situation hat?
Lösung
Ich weiß, dies ist eine alte Post, aber wenn man bedenkt, dass es wird vorgeschlagen nicht Erwähnenswert ist, dass, wenn Sie für CSS3-kompatibele Browser schreiben, Sie calc verwenden können:
height: calc(100% - 18px);
Es lohnt sich zu beachten, dass nicht alle Browser zur Zeit den Standard CSS3 Calc () Funktion unterstützen, damit die Umsetzung der Browser bestimmte Versionen der Funktion kann wie folgt erforderlich:
/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
Andere Tipps
Für ein bisschen einen anderen Ansatz, den Sie so etwas wie dies auf der Liste verwenden:
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
Das funktioniert, solange die übergeordneten Container hat position: relative;
Ich benutze JQuery für diese
function setSizes() {
var containerHeight = $("#listContainer").height();
$("#myList").height(containerHeight - 18);
}
dann binde ich das Fenster Resize es recalc, wenn das Browser-Fenster Größe geändert wird (wenn Container Größe mit Fenstern Resize geändert)
$(window).resize(function() { setSizes(); });
Do die Höhe als Prozentsatz nicht definieren, setzen Sie einfach die top=0 und bottom=0, wie diese:
#div {
top: 0; bottom: 0;
position: absolute;
width: 100%;
}
Vermutungs 17px Kopfhöhe
Liste CSS:
height: 100%;
padding-top: 17px;
Rubrik CSS:
height: 17px;
float: left;
width: 100%;
- Verwenden negative Margen auf dem Elemente würden Sie weg zu minus Pixel mögen. (Gewünscht Element)
- Make
overflow:hidden;auf dem Aufnahmeelement - Zur
overflow:auto;auf das gewünschte Element.
Es funktionierte für mich!
Versuchen 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 ist der übergeordnete Container sollte hat so etwas wie:
position: relative;
Ich habe versucht, einige der anderen Antworten, und keiner von ihnen arbeitete recht, wie ich wollte, dass sie zu. Unsere Situation war sehr ähnlich, wo wir ein Fenster Header hatten und das Fenster war resizable mit Bildern in dem Fensterkörper. Wir wollten das Seitenverhältnis der Redimensionierung sperren, ohne Berechnungen zu Konto für die feste Größe des Headers hinzuzufügen zu benötigen und haben immer noch das Bild füllen die Fensterkörper.
Im Folgenden werde ich ein sehr einfaches Snippet erstellt, das zeigt, was wir am Ende tun, das zu funktionieren gut für unsere Situation scheint und sollte in den meisten Browsern kompatibel sein.
Auf dem Fensterelement haben wir einen 20px Rand was dazu beiträgt, die Positionierung relativ zu anderen Elementen auf dem Bildschirm, aber trage nicht auf die „Größe“ des Fensters. Der Fenster-Header wird dann absolut positioniert (was ihn aus dem Fluss der anderen Elemente entfernt, so wird es nicht Ursache andere Elemente wie die ungeordnete Liste verschoben werden), und seine Spitze ist -20px positioniert, die die Header innerhalb des Randes platziert des Fensters. Schließlich unser ul-Element wird dem Fenster hinzugefügt und die Höhe auf 100% festgelegt werden, die es bewirkt, dass das Fenster des Körpers (ohne Rand) füllen.
*,*: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>
Eine weitere Möglichkeit, um das gleiche Ziel zu erreichen: flex-Boxen . Machen Sie den Behälter eine Spalte flex Feld und dann haben Sie alle Freiheit einige Elemente zu ermöglichen, haben mit fester Größe (Standardverhalten) oder Auffüll- / schrumpf bis auf den Behälterraum (mit Flex wachsen: 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, zu erweitern oder das Fenster reduziert den Effekt zu bemerken)
Hinweis: Sie auch die Kurzschrift-Eigenschaft verwenden können:
flex:1 1 auto;
Danke, ich gelöst Mine mit Ihrer Hilfe, es ein wenig zwicken, da ich ein div 100% Breite 100% heigth (weniger Höhe einer unteren Leiste) und keine Rolle auf Körper wollen (ohne Hack / Versteck Scrollbalken).
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>
Dass der Trick, oh ja, ich legte Wert wenig greatter für Boden div.adjusted als für untere Stangenhöhe, da sonst die vertikale Bildlaufleiste angezeigt wird, i eingestellt der nächste Wert.
Dieser Unterschied liegt daran, dass eines der Elemente auf dynamischen Bereich wird ein zusätzliches Bodenloch fügt hinzu, dass ich weiß nicht, wie man loswerden ... es ist ein Video-Tag (HTML5), bitte beachten Sie, dass die i-Video-Tag setzte mit diese CSS (so gibt es keinen Grund für eine untere Loch zu machen, aber es tut):
video{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
Die objetive: Haben Sie ein Video, das die 100% des Brower nimmt (und passt die Größe dynamisch beim Browser geändert wird, aber ohne das Seitenverhältnis zu ändern) weniger einen unteren Raum, dass ich mit einigen Texten für eine div verwenden, Knöpfe, usw. (und Validatoren w3c & CSS natürlich).
EDIT: ich den Grund gefunden, Video-Tag ist wie Text, kein Blockelement, so regelte ich es mit diesem CSS:
video{
display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
Beachten Sie den display:block; auf Video-Tag.
Ich bin nicht sicher, ob diese Arbeit in Ihrer speziellen Situation, aber ich habe festgestellt, dass Polsterung im Inneren div Inhalt um innerhalb eines div schieben, wenn das enthält div eine feste Größe ist. Sie würden zu jedem Schwimmer haben oder unbedingt Ihr Kopfelement positionieren, aber ansonsten habe ich dies für eine variable Größe divs nicht versucht.
