CSS Cara mengatur tinggi div 100% minus nPx

199

Saya memiliki div pembungkus yang terdiri dari 2 div yang bersebelahan. Di atas wadah ini saya memiliki div yang berisi tajuk saya. Pembungkus div harus 100% dikurangi tinggi header. Headernya sekitar 60 px. Ini sudah diperbaiki. Jadi pertanyaan saya adalah: bagaimana cara mengatur tinggi div pembungkus saya menjadi 100% dikurangi 60 px?

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

css height Martijn
sumber

16

Saya benar-benar berharap w3c mempertimbangkan untuk menambahkan beberapa nilai minus properti konstan ke lebar, mereka lupa untuk memasukkan batas dalam lebar tetapi mereka harus mengubah definisi sebagian besar peretasan CSS akan hilang jika dua hal ini tersedia.

samarjit samanta

79

Berikut ini adalah css yang berfungsi, diuji di bawah 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" tidak disetujui w3c, tetapi setiap browser utama mendukungnya. Dua div Anda # kiri dan kanan akan menampilkan bilah gulir vertikal jika isinya terlalu tinggi.

Agar ini bekerja di bawah IE7, Anda harus memicu mode yang sesuai standar dengan menambahkan 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>

Luaskan cuplikan

Alsciende
sumber

Ia bekerja di FF, tetapi saya tidak membuatnya bekerja di bawah IE7. Saya hanya melihat Kode 'Header': <div id = "header"> Header </div> <div id = "wrapper"> <div id = "kiri"> Kiri </div> <div id = "kanan"> Benar </div> </div>

Martijn

Apakah Anda memicu mode yang sesuai standar? Saya akan menambahkan halaman contoh dalam respons saya.

Alsciende

1

Juga, jika Anda perlu memposisikan div ini di tengah halaman atau di mana pun, cukup bungkus dalam div wadah dan atur position: relativedi wadah. Kemudian tempatkan wadah di mana saja Anda suka di halaman.

Tuan

bagaimana dengan inner div, di dalam #left misalnya jika saya ingin 2 divs dengan ketinggian masing-masing 40% dan 60%?

TecHunter

Apakah ada alasan spesifik mengapa px ditentukan pada 0 parameter nilai?

Cassandra

274

Di CSS3 Anda bisa menggunakan

height: calc(100% - 60px);

libjup
sumber

25

Pastikan Anda memiliki ruang sebelum dan sesudah tanda "-". Firefox harus memiliki ruang sebelum tanda "-".

Codler

7

sempurna. saya tidak tahu CSS3 bisa melakukan ini.

Tom Beech

Wow! apa yang saya inginkan. Terima kasih.

Sandhu

1

Ini fantastis

Mirko

47

Jika Anda perlu mendukung IE6, gunakan JavaScript jadi kelola ukuran pembungkus div (atur posisi elemen dalam piksel setelah membaca ukuran jendela). Jika Anda tidak ingin menggunakan JavaScript, maka ini tidak dapat dilakukan. Ada beberapa solusi tetapi berharap satu atau dua minggu untuk membuatnya berfungsi dalam setiap kasus dan di setiap browser.

Untuk peramban modern lainnya, gunakan css ini:

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

Aaron Digulla
sumber

Situs ini hanya kompatibel dengan IE 7. Ketika saya menggunakan tinggi: 100% dan atas: 60px; Saya masih mendapat scrollbar. Saya dapat menggulir 60px ke bawah.

Martijn

4

Jangan menentukan ketinggian, gunakan atas dan bawah dan biarkan browser menghitung tinggi.

Aaron Digulla

Tapi saya ingin halaman saya memiliki ketinggian maksimal 100% dikurangi 60px; Jika konten lebih besar dari itu, saya ingin scrollbar di div dengan menggunakan overflow: scroll;

Martijn

4

Untuk bilah gulir, tambahkan div di dalam pembungkus yang mengisinya sepenuhnya dan buat itu melimpah: gulir;

Aaron Digulla

Perhatikan bahwa karena bug di IE7, ini mungkin masih gagal. Jika Anda tidak bisa membuatnya berfungsi, gunakan JavaScript. Saya tahu, Anda tidak suka itu, tetapi timbangkan saja selama seminggu bekerja dengan bug aneh.

Aaron Digulla

6

hebat ... sekarang saya telah berhenti menggunakan% he he he ... kecuali untuk wadah utama seperti yang ditunjukkan di bawah ini:

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

dan inilah 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;
}

Saya menguji ini di semua browser yang dikenal dan berfungsi dengan baik. Apakah ada kekurangan menggunakan cara ini?

Jayaveer
sumber

4

Anda dapat melakukan sesuatu seperti tinggi: calc (100% - nPx); misalnya tinggi: calc (100% - 70px);

DrB
sumber

2

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

Pastikan saat menggunakan lebih sedikit

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

Kalau tidak, tidak akan mengkompilasinya dengan benar

Dadhich Sourav
sumber

0

Ini tidak persis menjawab pertanyaan seperti yang diajukan, tetapi itu menciptakan efek visual yang sama yang Anda coba capai.

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

0

Dalam contoh ini Anda dapat mengidentifikasi area yang berbeda:

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

0

Saya belum melihat yang seperti ini diposting, tapi saya pikir saya akan meletakkannya di sana.

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

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

Ini jsfiddle yang berfungsi

Catatan: Saya tidak tahu apa kompatibilitas browser untuk ini. Saya hanya bermain-main dengan solusi alternatif dan ini sepertinya bekerja dengan baik.

FreedomMan
sumber

-1

Gunakan div pembungkus luar yang diatur ke 100% dan kemudian pembungkus div batin Anda 100% sekarang relatif terhadap itu.

Saya pikir pasti ini bekerja untuk saya, tetapi ternyata tidak:

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

Dapat memberikan contohnya. Saya tidak mengerti

Martijn

Saya memposting apa yang saya pikirkan, tetapi saya tidak bisa membuatnya bekerja sepagi ini / terlambat. Mungkin jika aku tidur lebih lama.

Cade Roux

-1

Jika Anda tidak ingin menggunakan penentuan posisi absolut dan semua jazz itu, berikut ini adalah perbaikan yang ingin saya gunakan:

html Anda:

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

css Anda:

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

scotsqueakscoot
sumber

1

Saya tidak berpikir ini berfungsi seperti yang diharapkan. Pertama #headerharus margin-top:-60px;. Kedua, height:100%berarti tinggi akan 100% dari tinggi elemen induk, tidak termasuk margin, padding dan batas. Bergantung pada pengaturan gulir Anda, ini akan menyebabkan bilah gulir muncul atau konten Anda dipotong.

Kylos

CSS Cara mengatur tinggi div 100% minus nPx

Jawaban: