CSS Jak ustawić wysokość div 100% minus nPx

199

Mam otoki otoki, która zawiera 2 div obok siebie. Powyżej tego kontenera mam div, który zawiera mój nagłówek. Div otoki musi wynosić 100% minus wysokość nagłówka. Nagłówek ma około 60 pikseli. Zostało to naprawione. Więc moje pytanie brzmi: jak ustawić wysokość div otoki opakowania na 100% minus 60 pikseli?

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

css height

— Martijn
źródło

16

Naprawdę chciałbym, żeby w3c zastanowił się nad dodaniem wartości do wartości minus stała dla szerokości, zapomnieli uwzględnić granice w szerokości, ale powinni byli zmienić definicję większości hacków CSS, gdyby te dwie rzeczy były dostępne.

— samarjit samanta

79

Oto działający css, przetestowany pod 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” nie jest zatwierdzony przez w3c, ale obsługuje go każda większa przeglądarka. Two divs #left i #right wyświetli pionowy pasek przewijania, jeśli ich zawartość jest zbyt wysoka.

Aby działało to pod IE7, musisz uruchomić tryb zgodny ze standardami, dodając 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>

Rozwiń fragment kodu

— Alsciende
źródło

Działa w FF, ale nie działam pod IE7. Widzę tylko kod „Header”: <div id = "header"> Header </div> <div id = "wrapper"> <div id = "left"> Left </div> <div id = "right"> Prawo </div> </div>

— Martijn

Czy uruchomiłeś tryb zgodny ze standardami? Dodam przykładową stronę w mojej odpowiedzi.

— Alsciende

1

Ponadto, jeśli chcesz umieścić te div na środku strony lub gdziekolwiek indziej, po prostu zawiń je w div div kontenera i ustaw position: relativena kontener. Następnie umieść pojemnik w dowolnym miejscu na stronie.

— Mrchief

co z wewnętrznymi divami, na przykład wewnątrz #w lewo, jeśli chcę 2 divy o odpowiednich wysokościach 40% i 60%?

— TecHunter

Czy istnieje konkretny powód, dla którego px podano dla parametrów wartości 0?

— Cassandra,

274

W CSS3 możesz użyć

height: calc(100% - 60px);

— libjup
źródło

25

Upewnij się, że masz wolne miejsce przed i po znaku „-”. Firefox musi mieć miejsce przed znakiem „-”.

— Codler

7

idealny. nie wiedziałem, że CSS3 może to zrobić.

— Tom Beech,

Łał! dokładnie to, czego chciałem. Dzięki.

— Sandhu

1

To fantastyczne

— Mirko,

47

Jeśli potrzebujesz obsługi IE6, użyj JavaScript, więc zarządzaj rozmiarem otoki opakowania (ustaw pozycję elementu w pikselach po odczytaniu rozmiaru okna). Jeśli nie chcesz używać JavaScript, nie możesz tego zrobić. Istnieją obejścia, ale spodziewaj się, że za tydzień lub dwa sprawdzi się w każdym przypadku i w każdej przeglądarce.

W przypadku innych nowoczesnych przeglądarek użyj tego css:

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

— Aaron Digulla
źródło

Strona jest kompatybilna tylko z IE 7. Kiedy używam wysokości: 100% i góry: 60px; Nadal mam pasek przewijania. Mogę przewinąć o 60 pikseli w dół.

— Martijn

4

Nie określaj wysokości, użyj góry i dołu i pozwól przeglądarce obliczyć wysokość.

— Aaron Digulla

Ale chcę, aby moja strona miała maksymalną wysokość 100% minus 60 pikseli; Jeśli zawartość jest większa, chcę paski przewijania w div, używając overflow: scroll;

— Martijn

4

W przypadku paska przewijania dodaj div wewnątrz opakowania, który całkowicie go wypełnia i wykonaj przelew: scroll;

— Aaron Digulla

Pamiętaj, że z powodu błędów w IE7 może to nadal nie powieść się. Jeśli nie możesz go uruchomić, użyj JavaScript. Wiem, że ci się nie podoba, ale zważ to na tydzień pracy zmagającej się z dziwnymi błędami.

— Aaron Digulla

6

świetny ... teraz przestałem używać% he he on ... z wyjątkiem głównego pojemnika, jak pokazano poniżej:

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

a oto 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;
}

przetestowałem to we wszystkich znanych przeglądarkach i działa dobrze. Czy korzystanie z tej metody ma jakieś wady?

— Jayaveer
źródło

4

Możesz zrobić coś takiego jak wysokość: calc (100% - nPx); na przykład wysokość: oblicz (100% - 70 pikseli);

— DrB
źródło

2

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

Upewnij się, używając mniej

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

W przeciwnym razie less nie skompiluje go poprawnie

— Dadhich Sourav
źródło

0

To nie odpowiada dokładnie na postawione pytanie, ale tworzy ten sam efekt wizualny, który próbujesz osiągnąć.

<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
źródło

0

W tym przykładzie możesz zidentyfikować różne obszary:

<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
źródło

0

Nie widziałem jeszcze czegoś takiego, ale pomyślałem, że to tam opublikuję.

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

Następnie 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;
}

Oto działający jsfiddle

Uwaga: nie mam pojęcia, do czego służy zgodność przeglądarki. Po prostu bawiłem się alternatywnymi rozwiązaniami i wydawało się, że to działa dobrze.

— FreedomMan
źródło

-1

Użyj zewnętrznego otoka otoki ustawiony na 100%, a następnie wewnętrzny otok otoki 100% powinien być teraz względem tego.

Myślałem, że to na pewno zadziałało, ale najwyraźniej nie:

<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
źródło

Podam przykład tego. Nie rozumiem

— Martijn

Opublikowałem to, o czym myślałem, ale nie mogę tego zrobić tak wcześnie / późno. Może gdybym się trochę przespał.

— Cade Roux,

-1

Jeśli nie chcesz używać absolutnego pozycjonowania i całego tego jazzu, oto poprawka, którą lubię:

twój html:

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

twój css:

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

— scotsqueakscoot
źródło

1

Nie sądzę, że to działa zgodnie z oczekiwaniami. Najpierw #headerpowinno być margin-top:-60px;. Po drugie, height:100%oznacza, że wysokość będzie wynosić 100% wysokości elementów macierzystych, nie uwzględniając marginesów, wypełnienia i ramek. W zależności od ustawień przewijania spowoduje to wyświetlenie pasków przewijania lub przycięcie zawartości.

— Kylos