Tinggi CSS 100% dengan padding / margin

813

Dengan HTML / CSS, bagaimana saya bisa membuat elemen yang memiliki lebar dan / atau tinggi 100% dari elemen induknya dan masih memiliki bantalan atau margin yang tepat?

Maksud saya, "tepat" jika elemen induk saya 200pxtinggi dan saya tentukan height = 100%dengan, padding = 5pxsaya akan berharap bahwa saya harus mendapatkan 190pxelemen tinggi dengan border = 5pxdi semua sisi, baik berpusat di elemen induk.

Sekarang, saya tahu itu bukan bagaimana model kotak standar menentukan itu harus bekerja (walaupun saya ingin tahu mengapa, tepatnya ...), jadi jawaban yang jelas tidak bekerja:

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

Tetapi bagi saya tampaknya ada BEBERAPA cara andal menghasilkan efek ini untuk orang tua dengan ukuran sewenang-wenang. Adakah yang tahu cara menyelesaikan tugas (yang tampaknya sederhana) ini?

Oh, dan sebagai catatan saya tidak terlalu tertarik pada kompatibilitas IE sehingga seharusnya (semoga) membuat segalanya lebih mudah.

EDIT: Karena sebuah contoh diminta, inilah yang paling sederhana yang dapat saya pikirkan:

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

Tantangannya adalah untuk mendapatkan kotak hitam untuk muncul dengan padding 25 pixel di semua tepi tanpa halaman tumbuh cukup besar untuk memerlukan scrollbar.

css

— Toji
sumber

Saya telah menemukan dua solusi ini sebagai yang paling dapat diandalkan: http://www.xs4all.nl/~peterned/examples/csslayout1.html http://themaninblue.com/experiment/footerStickAlt/ Apakah Anda memiliki HTML spesifik yang kita bisa melihat dan bermain?

— Nick Presta

stackoverflow.com/questions/3931187/…

— Ben

755

Saya belajar bagaimana melakukan hal-hal ini dengan membaca " PRO HTML dan Pola Desain CSS ". Ini display:blockadalah nilai tampilan default untuk div, tetapi saya ingin membuatnya eksplisit. Wadah harus jenis yang tepat; positionatribut fixed, relativeatau absolute.

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}

<div class="stretchedToMargin">
  Hello, world
</div>

Luaskan cuplikan

Fiddle oleh komentar Nooshu

— Frank Schwieterman
sumber

42

Solusi hebat, akan bookmark yang satu ini. Hanya dengan cepat menambahkannya ke jsfiddle.net/Rpdr9 untuk siapa saja yang menginginkan demo langsung. Semoga kamu tidak keberatan.

— Nooshu

16

Walaupun @Toji tidak peduli dengan kompatibilitas IE, sayangnya saya harus Solusi ini awalnya tidak bekerja di bawah IE6. Menambahkan Dean Edwards ' IE9.js ke halaman membuat karya ini. Sekarang saya hanya perlu berharap dan berdoa agar posisi relatif / absolut tidak mengacaukan sesuatu dalam elemen anak ...

— Christopher Parker

24

-1 (meskipun sepertinya saya minoritas di sini: P). Ini mengasumsikan bahwa kotak dapat diposisikan secara mutlak; orang sudah sering menggunakan pos: abs apa adanya, mereka tidak membutuhkan amunisi ini. Ambil contoh ini: div "panel" dengan beberapa div dari "panel" kelas di dalamnya. "panel" memiliki {overflow: hidden; tinggi: 300px;}, dan "panel" memiliki berbagai konten / tinggi konten, dengan {border: # 000 solid 1px; mengapung: kiri; margin-right: 10px;}. Jadikan semua "panel" ketinggian "panel" tanpa kehilangan batas di titik mana pun. Divs "panel" tidak dapat pos: abs di sini. @ Solusi Marco bekerja untuk skenario ini.

— eternicode

8

Oh wow, saya mengerti. The top:0,, bottom:0pada dasarnya "meregangkan" elemen. Aku hanya bisa mendapatkannya untuk bekerja dengan position:absolutemeskipun

— Matt

7

Tidak bisakah Anda melakukan top:20px;bottom:20px;left:20px;right:20px;alih - alih menggunakan margin sama sekali?

— chowey

391

Ada properti baru di CSS3 yang dapat Anda gunakan untuk mengubah cara model kotak menghitung lebar / tinggi, itu disebut ukuran kotak.

Dengan menyetel properti ini dengan nilai "border-box", elemen apa pun yang Anda terapkan tidak akan meregang ketika Anda menambahkan padding atau border. Jika Anda menentukan sesuatu dengan lebar 100px, dan bantalan 10px, itu akan tetap menjadi lebar 100px.

box-sizing: border-box;

Lihat di sini untuk dukungan browser . Itu tidak bekerja untuk IE7 dan lebih rendah, namun, saya percaya bahwa IE7.js Dean Edward menambahkan dukungan untuk itu. Nikmati :)

— Marco Jardim
sumber

45

Akhirnya! Saya sudah menunggu fitur persis ini selama sekitar 10 tahun sekarang. Kasihan IE7 tidak mendukungnya, tetapi saya selalu berpikir orang yang masih menggunakan IE tidak layak tata letak yang indah.

— cronoklee

2

Ini bekerja pada iPhone / Safari dan browser default Android untuk saya sedangkan solusi yang diposisikan di atas tidak berfungsi.

— Spud

18

Ini pada dasarnya sama dengan model kotak mode kebiasaan IE . Saya merasa lucu bagaimana semua orang membenci IE namun sekarang border-boxadalah pahlawan semua orang :)

— Matt Greer

14

FYI, awalan peramban untuk ukuran kotak sekarang dihapus untuk semua kecuali -moz. Lihat paulirish.com/2012/box-sizing-border-box-ftw dan komentar untuk diskusi yang bagus

— aponzani

3

Iya! Ini adalah jawaban yang benar! Tinggi 100% sekarang timbangan dengan benar relatif terhadap orang tua mereka, tanpa tumpah. Akan memberi satu juta +1 jika saya bisa.

— Andrew Mao

65

Solusinya adalah TIDAK menggunakan tinggi dan lebar sama sekali! Pasang kotak dalam menggunakan atas, kiri, kanan, bawah dan kemudian tambahkan margin.

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}

<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>

Luaskan cuplikan

— amolk
sumber

6

Pilih karena Anda secara teknis benar, tetapi pada dasarnya jawaban yang sama seperti milik Frank (yang menurut saya sedikit lebih ramah pada browser yang nakal di luar sana.)

— Toji

39

Cara yang lebih baik adalah dengan properti calc (). Jadi kasus Anda akan terlihat seperti:

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

Sederhana, bersih, tidak ada solusi. Pastikan Anda tidak lupa ruang antara nilai dan operator (mis. (100%-5px)Itu akan mematahkan sintaks. Nikmati!

— Brian Aderer
sumber

6

Solusi yang bagus. Ingatlah untuk memeriksa dukungan browser: Dapatkah saya menggunakan calc ()

— Brett Postin

5

Bukankah ini benar-benar memberi Anda 100% lebar dan tinggi masing-masing PLUS 5px padding, karena padding secara efektif akan membuat elemen 10px lebih lebar dan lebih besar, masing-masing?

Akhirnya solusi yang baik, dan tidak seperti yang lain di sana Anda pot atas, kanan, bawah dan kiri menjadi 0, yang hanya akan bekerja dengan posisi: absolut;

— Gil Epshtain

Saya pikir yang benar adalah: #myDiv {width: calc (100% - 10px); tinggi: calc (100% - 10px); padding: 5px; } 5 dari kiri dan 5 dari kanan = 10, 5 dari atas dan 5 dari bawah = 10

— Chris P

21

Menurut spesifikasi w3c, ketinggian mengacu pada ketinggian area yang dapat dilihat, mis. Pada monitor resolusi 1280x1024 piksel, tinggi 100% = 1024 piksel.

min-height mengacu pada tinggi total halaman termasuk konten sehingga pada halaman di mana konten lebih besar dari 1024px min-height: 100% akan meregangkan untuk memasukkan semua konten.

Masalah lainnya adalah padding dan border ditambahkan pada tinggi dan lebar di sebagian besar browser modern kecuali ie6 (ie6 sebenarnya cukup logis tetapi tidak sesuai dengan spesifikasi). Ini disebut model kotak. Jadi jika Anda tentukan

min-height: 100%;
padding: 5px;

Ini benar-benar akan memberi Anda 100% + 5px + 5px untuk ketinggian. Untuk menyiasatinya, Anda perlu wadah pembungkus.

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>

— Alex
sumber

4

@ Alex: Tapi apa yang membuat div bagian dalam (yang empuk) 100% dari ketinggian bagian luar div. Pengalaman saya adalah bahwa Anda hanya mendapatkan div pendek di dalam div full-height yang lebih besar.

— Lawrence Dol

8

1. Tinggi penuh dengan padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

Luaskan cuplikan

2. Tinggi penuh dengan margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}

<div class="container">Hello world.</div>

Luaskan cuplikan

3. Tinggi penuh dengan border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

Luaskan cuplikan

— Stiker
sumber

7

Ini adalah salah satu kebodohan langsung CSS - Saya belum memahami alasannya (jika ada yang tahu, tolong jelaskan).

100% berarti 100% tinggi wadah - yang ditambahkan setiap margin, batas dan bantalan. Jadi secara efektif mustahil untuk mendapatkan wadah yang mengisi induknya dan yang memiliki margin, batas, atau bantalan.

Perhatikan juga, pengaturan tinggi juga tidak konsisten di antara browser.

Hal lain yang saya pelajari sejak saya memposting ini adalah bahwa persentasenya relatif panjang wadah , yaitu lebarnya, membuat persentasenya bahkan lebih berharga untuk ketinggian.

Saat ini, unit viewport vh dan vw lebih berguna, tetapi masih tidak terlalu berguna untuk apa pun selain wadah tingkat atas.

— Lawrence Dol
sumber

Tidak ada alasan, hanya apa yang terjadi di mana browser mulai berkumpul menuju perilaku yang konsisten. Lihatlah buku yang disebutkan dalam tanggapan saya.

— Frank Schwieterman

Terpilih untuk menggunakan istilah yang tepat. Tex dan manajer tata letak apa pun yang saya lihat sudah benar, hanya CSS harus khusus.

— maaartinus

5

Solusi lain adalah dengan menggunakan tampilan: tabel yang memiliki perilaku model kotak yang berbeda.

Anda dapat mengatur tinggi dan lebar untuk induk dan menambahkan padding tanpa memperluasnya. Anak memiliki tinggi dan lebar 100% minus bantalan.

JSBIN

Pilihan lain adalah menggunakan propperty ukuran kotak. Satu-satunya masalah dengan keduanya adalah mereka tidak bekerja di IE7.

— pengguna1721135
sumber

4

Solusi lain: Anda dapat menggunakan satuan persentase untuk margin serta ukuran. Sebagai contoh:

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

Masalah utama di sini adalah bahwa margin akan naik / turun sedikit dengan ukuran elemen induk. Agaknya fungsi yang Anda inginkan adalah agar margin tetap konstan dan elemen anak tumbuh / menyusut untuk mengisi perubahan spasi. Jadi, tergantung seberapa ketat tampilan yang Anda inginkan, itu bisa menjadi masalah. (Saya juga memilih margin yang lebih kecil, seperti 0,3%).

— ktbiz
sumber

3

Solusi dengan flexbox (bekerja pada IE11): ( atau lihat di jsfiddle )

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

( CSS-reset tidak selalu penting untuk masalah aktual.)

Bagian yang penting adalah flex: 1(Dikombinasikan dengan display: flexdi induknya). Lucunya, penjelasan paling masuk akal yang saya tahu tentang cara kerja properti Flex berasal dari dokumentasi asli, jadi saya tetap merujuknya :

(...) flex: 1, yang memberitahu komponen untuk mengisi semua ruang yang tersedia, dibagi secara merata di antara komponen lain dengan induk yang sama

— Putzi San
sumber

2

Contoh Frank sedikit membingungkan saya - itu tidak berhasil dalam kasus saya karena saya belum memahami posisi dengan cukup baik. Penting untuk dicatat bahwa elemen wadah induk perlu memiliki posisi non-statis (dia menyebutkan ini tetapi saya mengabaikannya, dan itu tidak ada dalam contohnya).

Berikut adalah contoh di mana anak - diberi bantalan dan perbatasan - menggunakan posisi absolut untuk mengisi induk 100%. Orang tua menggunakan posisi relatif untuk memberikan titik referensi untuk posisi anak sambil tetap dalam aliran normal - elemen berikutnya "lebih banyak konten" tidak terpengaruh:

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

Tautan yang berguna untuk mempelajari posisi CSS dengan cepat

— Peter Tseng
sumber

0

Perbatasan sekitar div, bukan margin halaman tubuh

Solusi lain - Saya hanya ingin batas sederhana di sekitar tepi halaman saya, dan saya ingin tinggi 100% ketika konten lebih kecil dari itu.

Border-box tidak berfungsi, dan pemosisian tetap tampak salah untuk kebutuhan yang begitu sederhana.

Saya akhirnya menambahkan batas pada wadah saya, alih-alih mengandalkan margin dari isi halaman - sepertinya:

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

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}

— Kris Randall
sumber

0

Ini adalah perilaku default dari display: blockCara tercepat yang dapat Anda perbaiki pada tahun 2020 adalah dengan mengatur display: 'flex'elemen induk dan padding misalnya 20px maka semua anak-anaknya akan memiliki tinggi 100% relatif terhadap tinggi.

— Freestyle09
sumber

0

Untuk menambahkan -webkit dan -moz akan lebih tepat

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

— pengguna3113626
sumber

-2

  <style type="text/css">
.stretchedToMargin {
    position:absolute;
    width:100%;
    height:100%;

}
</style>

— Mujassir Nasir
sumber