CSS Come impostare l'altezza div 100% meno nPx

199

Ho un div wrapper che contrappone 2 div uno accanto all'altro. Sopra questo contenitore ho un div che contiene la mia intestazione. Il div wrapper deve essere 100% meno l'altezza dell'intestazione. L'intestazione è di circa 60 px. Questo è stato risolto. Quindi la mia domanda è: come faccio a impostare l'altezza del mio div wrapper su 100% meno i 60 px?

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

css height

— Martijn
fonte

16

Vorrei davvero che W3C considerasse l'aggiunta di un valore meno la proprietà costante alla larghezza, si sono dimenticati di includere i bordi nella larghezza ma avrebbero dovuto cambiare la definizione che la maggior parte degli hack CSS svanirebbe se queste due cose fossero disponibili.

— Samarjit Samanta,

79

Ecco un css funzionante, testato sotto Firefox / IE7 / Safari / Chrome / Opera.

* {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" non è approvato da W3C, ma è supportato da tutti i principali browser. I tuoi due div #left e #right visualizzeranno una barra di scorrimento verticale se il loro contenuto è troppo alto.

Perché funzioni sotto IE7, devi attivare la modalità conforme agli standard aggiungendo un DOCTYPE:

<!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>

Espandi frammento

— Alsciende
fonte

Funziona in FF, ma non riesco a farlo funzionare in IE7. Vedo solo il codice "Header": <div id = "header"> Header </div> <div id = "wrapper"> <div id = "left"> Left </div> <div id = "right"> Giusto </div> </div>

— Martijn,

Hai attivato la modalità conforme agli standard? Aggiungerò una pagina di esempio nella mia risposta.

— Alsciende,

1

Inoltre, se hai bisogno di posizionare questi div al centro della pagina o in qualsiasi altro luogo, basta avvolgerli in un div contenitore e posizionarli position: relativesul contenitore. Quindi posizionare il contenitore ovunque nella pagina.

— Mrchief,

che dire di inner div, all'interno di #left, ad esempio, se voglio 2 div con rispettive altezze del 40% e del 60%?

— TecHunter il

C'è un motivo specifico per cui px è stato specificato su 0 parametri valore?

— Cassandra,

274

In CSS3 potresti usare

height: calc(100% - 60px);

— libjup
fonte

25

Assicurati di avere spazio prima e dopo il segno "-". Firefox deve avere spazio prima del segno "-".

— Codler,

7

Perfetto. non sapevo che CSS3 potesse farlo.

— Tom Beech,

Wow! esattamente quello che volevo. Grazie.

— Sandhu,

1

È fantastico

— Mirko,

47

Se è necessario supportare IE6, utilizzare JavaScript in modo da gestire la dimensione del div wrapper (impostare la posizione dell'elemento in pixel dopo aver letto la dimensione della finestra). Se non si desidera utilizzare JavaScript, non è possibile farlo. Ci sono soluzioni alternative, ma ci si aspetta una settimana o due per farlo funzionare in ogni caso e in ogni browser.

Per altri browser moderni, utilizzare questo css:

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

— Aaron Digulla
fonte

Il sito è compatibile solo con IE 7. Quando uso l'altezza: 100% e superiore: 60px; Ho ancora una barra di scorrimento. Posso scorrere 60px verso il basso.

— Martijn,

4

Non specificare un'altezza, usa la parte superiore e inferiore e lascia che il browser calcoli l'altezza.

— Aaron Digulla,

Ma voglio che la mia pagina abbia un'altezza massima del 100% meno 60px; Se il contenuto è più grande di quello, voglio barre di scorrimento nel div usando overflow: scroll;

— Martijn,

4

Per una barra di scorrimento, aggiungi un div all'interno del wrapper che lo riempia completamente e fai quel overflow: scroll;

— Aaron Digulla,

Si noti che a causa di bug in IE7, ciò potrebbe comunque non riuscire. Se non riesci a farlo funzionare, usa JavaScript. Lo so, non ti piace, ma soppesalo per una settimana di lavoro alle prese con strani bug.

— Aaron Digulla,

6

ottimo ... ora ho smesso di usare% lui lui lui ... tranne il contenitore principale come mostrato di seguito:

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

ed ecco il 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;
}

ho provato questo in tutti i browser conosciuti e funziona bene. Ci sono degli svantaggi in questo modo?

— Jayaveer
fonte

4

Puoi fare qualcosa come l' altezza: calc (100% - nPx); ad esempio altezza: calc (100% - 70px);

— DRB
fonte

2

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

Assicurati di usare meno

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

Altrimenti meno non sarà compilato correttamente

— Dadhich Sourav
fonte

0

Questo non risponde esattamente alla domanda come posta, ma crea lo stesso effetto visivo che stai cercando di ottenere.

<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
fonte

0

In questo esempio è possibile identificare diverse aree:

<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
fonte

0

Non ho ancora visto nulla di simile a questo post, ma ho pensato di pubblicarlo.

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

Quindi 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;
}

Ecco un jsfiddle funzionante

Nota: non ho idea di quale sia la compatibilità del browser per questo. Stavo solo giocando con soluzioni alternative e questo sembrava funzionare bene.

— Freedomman
fonte

-1

Utilizzare un div involucro esterno impostato su 100% e quindi il div involucro interno 100% dovrebbe ora essere relativo a quello.

Pensavo che questo funzionasse per me, ma apparentemente no:

<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
fonte

Può fare un esempio. Non capisco

— Martijn,

Ho pubblicato quello a cui stavo pensando, ma non riesco a farlo funzionare così presto / tardi. Forse se dormo ancora un po '.

— Cade Roux,

-1

Se non vuoi usare il posizionamento assoluto e tutto quel jazz, ecco una soluzione che mi piace usare:

il tuo html:

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

il tuo css:

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

— scotsqueakscoot
fonte

1

Non penso che funzioni come previsto. Il primo #headerdovrebbe essere margin-top:-60px;. In secondo luogo, height:100%significa che l'altezza sarà pari al 100% dell'altezza degli elementi padre, esclusi margini, imbottitura e bordi. A seconda delle impostazioni di scorrimento, ciò comporterà la visualizzazione delle barre di scorrimento o il ritaglio del contenuto.

— Kylos,