CSS So stellen Sie die Div-Höhe auf 100% minus nPx ein

199

Ich habe ein Wrapper-Div, das 2 Divs nebeneinander enthält. Über diesem Container befindet sich ein Div, der meinen Header enthält. Das Wrapper-Div muss 100% minus der Höhe des Headers sein. Der Header ist ungefähr 60 px. Dies ist behoben. Meine Frage lautet also: Wie stelle ich die Höhe meines Wrapper-Divs auf 100% minus 60 px ein?

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

css height Martijn
quelle

16

Ich wünschte wirklich, w3c erwägt, der Breite einen Wert minus konstante Eigenschaft hinzuzufügen. Sie haben vergessen, die Ränder in die Breite aufzunehmen, aber sie hätten die Definition ändern sollen, die die meisten CSS-Hacks verschwinden würden, wenn diese beiden Dinge verfügbar wären.

Samarjit Samanta

79

Hier ist ein funktionierendes CSS, das unter Firefox / IE7 / Safari / Chrome / Opera getestet wurde.

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

"overflow-y" ist nicht von w3c zugelassen, wird jedoch von allen gängigen Browsern unterstützt. Ihre beiden Divs #left und #right zeigen eine vertikale Bildlaufleiste an, wenn ihr Inhalt zu hoch ist.

Damit dies unter IE7 funktioniert, müssen Sie den standardkonformen Modus durch Hinzufügen eines DOCTYPE auslösen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
	*{margin:0px;padding:0px;overflow:hidden}
	div{position:absolute}
	div#header{top:0px;left:0px;right:0px;height:60px}
	div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}
	div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
	div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
  <div id="left"><div style="height:1000px">high content</div></div>
  <div id="right"></div>
</div>
</body>

Erweitern Sie das Snippet

Alsciende
quelle

Es funktioniert in FF, aber ich bekomme es nicht unter IE7. Ich sehe nur 'Header'-Code: <div id = "header"> Header </ div> <div id = "wrapper"> <div id = "left"> Links </ div> <div id = "right"> Richtig </ div> </ div>

Martijn

Haben Sie den standardkonformen Modus ausgelöst? Ich werde meiner Antwort eine Beispielseite hinzufügen.

Alsciende

1

Wenn Sie diese Divs in der Mitte der Seite oder an einer anderen Stelle positionieren müssen, wickeln Sie sie einfach in ein Container-Div und setzen Sie sie position: relativeauf den Container. Platzieren Sie den Container dann an einer beliebigen Stelle auf der Seite.

Mrchief

Was ist mit innerem Div, innerhalb von #left zum Beispiel, wenn ich 2 Divs mit jeweiligen Höhen von 40% und 60% möchte?

TecHunter

Gibt es einen bestimmten Grund, warum px für 0-Wert-Parameter angegeben wurde?

Cassandra

274

In CSS3 könnten Sie verwenden

height: calc(100% - 60px);

libjup
quelle

25

Stellen Sie sicher, dass vor und nach dem "-" Zeichen Platz ist. Firefox muss vor dem "-" Zeichen stehen.

Codler

7

perfekt. Ich wusste nicht, dass CSS3 dies tun kann.

Tom Beech

Beeindruckend! genau das, was ich wollte. Vielen Dank.

Sandhu

1

Das ist fantastisch

Mirko

47

Wenn Sie IE6 unterstützen müssen, verwenden Sie JavaScript, um die Größe des Wrapper-Div zu verwalten (legen Sie die Position des Elements nach dem Lesen der Fenstergröße in Pixel fest). Wenn Sie kein JavaScript verwenden möchten, ist dies nicht möglich. Es gibt Problemumgehungen, aber erwarten Sie ein oder zwei Wochen, damit es in jedem Fall und in jedem Browser funktioniert.

Verwenden Sie für andere moderne Browser dieses CSS:

position: absolute;
top: 60px;
bottom: 0px;

Aaron Digulla
quelle

Die Seite ist nur IE 7-kompatibel. Wenn ich Höhe verwende: 100% und oben: 60px; Ich habe immer noch eine Bildlaufleiste. Ich kann 60px nach unten scrollen.

Martijn

4

Geben Sie keine Höhe an, verwenden Sie oben und unten und lassen Sie den Browser die Höhe berechnen.

Aaron Digulla

Ich möchte jedoch, dass meine Seite eine maximale Höhe von 100% minus 60 Pixel hat. Wenn der Inhalt größer als dieser ist, möchte ich Bildlaufleisten im div mit Überlauf: scroll;

Martijn

4

Fügen Sie für eine Bildlaufleiste ein Div im Wrapper hinzu, das es vollständig ausfüllt, und führen Sie diesen Überlauf aus: scroll;

Aaron Digulla

Beachten Sie, dass dies aufgrund von Fehlern in IE7 immer noch fehlschlagen kann. Wenn Sie es nicht zum Laufen bringen können, verwenden Sie JavaScript. Ich weiß, du magst es nicht, aber gewichte es gegen eine Woche Arbeit, die mit seltsamen Fehlern zu kämpfen hat.

Aaron Digulla

6

großartig ... jetzt habe ich aufgehört,% he he he zu verwenden ... mit Ausnahme des Hauptcontainers wie unten gezeigt:

<div id="divContainer">
    <div id="divHeader">
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">
        </div>
        <div id="divContentRight">
        </div>
    </div>
    <div id="divFooter">
    </div>
</div>

und hier ist die CSS:

#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
}
#divContentRight {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

Ich habe dies in allen bekannten Browsern getestet und funktioniert einwandfrei. Gibt es irgendwelche Nachteile auf diese Weise?

Jayaveer
quelle

4

Sie können so etwas wie Höhe tun : calc (100% - nPx); zum Beispiel Höhe: calc (100% - 70px);

DrB
quelle

2

div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

Stellen Sie sicher, während Sie weniger verwenden

height: ~calc(100% - 60px);

Andernfalls wird weniger nicht korrekt kompiliert

Dadhich Sourav
quelle

0

Dies beantwortet die gestellte Frage nicht genau, erzeugt jedoch den gleichen visuellen Effekt, den Sie erzielen möchten.

<style>

body {
  border:0;
  padding:0;
  margin:0;
  padding-top:60px;
}

#header {
  position:absolute;
  top:0;
  height:60px;
  width:100%;
}

#wrapper {
  height:100%;
  width:100%;
}
</style>

Noel Walters
quelle

0

In diesem Beispiel können Sie verschiedene Bereiche identifizieren:

<html>
<style>
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
    background-color:blue;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    bottom: 0px;
    background-color:red;
}
#divContentCenter {
    position: absolute;
    top: 0px;
    left: 200px;
    bottom: 0px;
    right:200px;
    background-color:yellow;
}
#divContentRight {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width:200px;
    background-color:red;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color:blue;
}
</style>
<body >

<div id="divContainer">
    <div id="divHeader"> top
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">left
        </div>
        <div id="divContentCenter">center
        </div>
        <div id="divContentRight">right
        </div>
    </div>
    <div id="divFooter">bottom
    </div>
</div>

</body>
</html>

Renzo Ciot
quelle

0

Ich habe so etwas noch nicht gesehen, aber ich dachte, ich würde es dort veröffentlichen.

<div class="main">
<header>Header</header>
<div class="content">Content</div>

Dann CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.main {
    height: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}

header {
    height: 50px;
    margin-top: -50px;
    width: 100%;
    background-color: #5078a5;
}

.content {
    height: 100%;
    background-color: #999999;
}

Hier ist eine funktionierende jsfiddle

Hinweis: Ich habe keine Ahnung, wie die Browserkompatibilität dafür ist. Ich habe nur mit alternativen Lösungen herumgespielt und das schien gut zu funktionieren.

FreedomMan
quelle

-1

Verwenden Sie einen äußeren Wrapper-Div, der auf 100% eingestellt ist, und dann sollte Ihr innerer Wrapper-Div 100% jetzt relativ dazu sein.

Ich war mir sicher, dass dies früher für mich funktioniert hat, aber anscheinend nicht:

<html>
<body>
<div id="outerwrapper" style="border : 1px solid red ; height : 100%">
<div id="header" style="border : 1px solid blue ; height : 60px"></div>
<div id="wrapper"  style="border : 1px solid green ; height : 100% ; overflow : scroll ;">
  <div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text 

on the left</div>
  <div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the 

right</div>
</div>
</div>
</body>
</html>

Cade Roux
quelle

Kann ein Beispiel dafür geben. Ich verstehe nicht

Martijn

Ich habe gepostet, woran ich gedacht habe, aber ich kann es nicht so früh / spät zum Laufen bringen. Vielleicht, wenn ich etwas mehr Schlaf bekomme.

Cade Roux

-1

Wenn Sie nicht die absolute Positionierung und den ganzen Jazz verwenden möchten, ist hier ein Fix, den ich gerne verwende:

Ihr HTML:

<body>    
   <div id="header"></div>
   <div id="wrapper"></div>
</body>

Ihr CSS:

body {
     height:100%;
     padding-top:60px;
}
#header {
     margin-top:60px;
     height:60px;
}
#wrapper {
     height:100%;
}

scotsqueakscoot
quelle

1

Ich denke nicht, dass dies wie erwartet funktioniert. Zuerst #headersollte sein margin-top:-60px;. Zweitens height:100%bedeutet dies, dass die Höhe 100% der Höhe der übergeordneten Elemente beträgt, ohne Ränder, Auffüllungen und Ränder. Abhängig von Ihren Bildlaufeinstellungen werden entweder Bildlaufleisten angezeigt oder Ihr Inhalt wird zugeschnitten.

Kylos

CSS So stellen Sie die Div-Höhe auf 100% minus nPx ein

Antworten: