Mengapa tidak tinggi: 100% berfungsi untuk memperluas div ke ketinggian layar?

295

Saya ingin carousel DIV (s7) meluas ke ketinggian seluruh layar. Saya tidak tahu mengapa itu tidak berhasil. Untuk melihat halaman Anda bisa pergi ke sini .

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

Luaskan cuplikan

html css height Earl Larson
sumber

2

Berikut ini penjelasan yang sederhana dan jelas: stackoverflow.com/a/31728799/3597276

Michael Benjamin

mungkin solusi terbaik untuk elemen bersarang yang tidak boleh meregang ke ketinggian seluruh jendela stackoverflow.com/questions/7049875/height-100-not-working/…

B-GangsteR

409

Agar nilai persentase berfungsi untuk ketinggian, tinggi induk harus ditentukan. Satu-satunya pengecualian adalah elemen root<html> , yang bisa menjadi persentase tinggi. .

Jadi, Anda telah memberikan semua elemen Anda tinggi, kecuali untuk <html>, jadi apa yang harus Anda lakukan adalah menambahkan ini:

html {
    height: 100%;
}

Dan kode Anda harusnya berfungsi dengan baik.

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

Luaskan cuplikan

Contoh JsFiddle .

Hantu Madara
sumber

23

Ok, jadi ini mungkin membuat saya terlihat sangat bodoh, tetapi apa pun : Apakah Anda bermaksud mengatakan bahwa itu <html>adalah elemen yang sebenarnya - persis seperti <p>atau <img />? Saya pikir satu-satunya tujuan <html>adalah untuk menentukan awal dan akhir dokumen HTML. Maksud saya, saya pikir itu ada di sana, bukan untuk tata letak, tapi supaya browser tahu jenis dokumen yang sedang dilihatnya? Saya benar-benar terpesona.

jay_t55

29

@ Joey: HTML adalah elemen aktual. Anda bisa mendesainnya dengan CSS, mengaitkan acara ke dalam JavaScript, menambahkan kelas dan ID untuk itu, dan itu muncul di DOM. Browser akan menganggap dokumen HTML bahkan tanpa <html>tag, dan bahkan tanpa <head>atau <body>elemen. Namun spesifikasi HTML, anggap <html>tag wajib. Singkatnya, ya, itu adalah elemen lengkap seperti semua elemen HTML lainnya.

Hantu Madara

1

@SecondRikudo: Tidak, <html>tag ini opsional sesuai dengan spesifikasi (mis. HTML4 dan HTML5). Dan ya, elemen itu tetap dibuat.

Robert Siemer

2

hmmm ... bagi saya, satu-satunya cara ini bekerja adalah mengatur keduanya htmldan bodyjuga height: 100%(Serta tentu saja spesifik divsaya ingin mewarisi ketinggian 100%)

james

1

@ James Ya, semua orang tua pasti memiliki tinggi badan yang diketahui.

Hantu Madara

147

_{Karena tidak ada yang menyebutkan ini ..}

Pendekatan Modern:

Sebagai alternatif untuk mengatur ketinggian kedua elemen html/ , Anda juga bisa menggunakan panjang viewport-persentase:body100%

5.1.2. Panjang persentase-viewport: unit 'vw', 'vh', 'vmin', 'vmax'

Panjang viewport-persentase relatif terhadap ukuran blok berisi awal. Ketika tinggi atau lebar blok yang mengandung awal diubah, mereka diskalakan sesuai.

Dalam hal ini, Anda bisa menggunakan nilai 100vh(yang merupakan ketinggian viewport) - (contoh)

body {
    height: 100vh;
}

Pengaturan min-heightjuga berfungsi. (contoh)

body {
    min-height: 100vh;
}

Unit-unit ini didukung di sebagian besar browser modern - dukungan dapat ditemukan di sini .

Josh Crozier
sumber

1

Saya tidak melihat manfaatnya sama sekali. Bukankah itu menciptakan kerja ekstra untuk browser yang perlu menghitung segala sesuatu yang terkait dengan viewport browser? Ukuran viewport hanya tampak bermanfaat ketika Anda ingin benar-benar mengukur sesuatu yang terkait dengan tinggi browser.

Robert Went

12

@RobertWent Ada manfaatnya. Misalnya, height: 100%hanya berfungsi jika elemen induk memiliki ketinggian yang ditentukan. Tentu saja ada beberapa kasus di mana induk elemen tidak memiliki tinggi yang ditentukan dan unit persentase viewport menyelesaikannya. Dengan kata lain, jika Anda memiliki elemen yang sangat bersarang, Anda bisa mengatur 100vh, dan itu akan memiliki ketinggian 100%browser. Anda mungkin tidak melihat manfaat apa pun, tetapi saya telah dalam banyak kasus di mana mereka adalah satu-satunya solusi. Unit-unit ini mungkin tidak bermanfaat bagi elemen-elemen root seperti html/ body, tetapi meskipun demikian, ini merupakan alternatif

Josh Crozier

2

Tetapi kita berbicara tentang elemen tubuh, bukan elemen bersarang. Hanya ada satu kemungkinan induk, elemen html. Inilah mengapa saya mengatakan bahwa saya tidak melihat manfaat dan mungkin lebih buruk daripada hanya menetapkan 100%. Komentar Anda tidak mengatakan apa pun untuk membuat saya kurus. Hanya karena sesuatu itu baru tidak membuatnya lebih baik. Namun, ini merupakan alternatif.

Robert Went

4

Masalah dengan pendekatan ini adalah bahwa iPhone mengecualikan bilah alamat dan navigasi bawah dari ketinggian tampilan, yang berarti body { height: 100vh }akan memiliki bilah gulir pada memuat halaman awal.

BHOLT

2

Bagus. Saya mencoba pendekatan yang lain, saya meletakkan height: 100% !important" to each parent til html` tanpa hasil, saya bisa melihat di dom bahwa setiap simpul pohon sebenarnya 100%tetapi saya tidak bisa mengatur 100% pada elemen yang diinginkan, tetapi dengan gaya viewport mudah.

pmiranda

25

Anda juga perlu mengatur tinggi 100% pada htmlelemen:

html { height:100%; }

shanethehat
sumber

20

Atau, jika Anda menggunakan position: absolutemaka height: 100%akan berfungsi dengan baik.

Steve Tauber
sumber

4

Akan menjadi perbaikan yang bagus jika saya tidak menggunakan flexbox untuk membuat tata letak saya. : /

Panggilan Landon

2

Jangan lupa atur width:100%;dan orang tuanya position:relative;.

Kai Noack

8

Anda harus mencoba dengan elemen induk;

html, body, form, main {
    height: 100%;
}

Maka ini sudah cukup:

#s7 {
   height: 100%;
}

mrbengi
sumber

5

jika Anda ingin, misalnya, kolom kiri (tinggi 100%) dan konten (tinggi otomatis), Anda dapat menggunakan absolut:

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

dalam html:

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

YellowMart
sumber

2

Ini mungkin tidak ideal tetapi Anda dapat melakukannya dengan javascript. Atau dalam kasus saya jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

oBo
sumber

5

Tidak pernah ada ide bagus untuk menggunakan javascript saat css saja sudah cukup.

Bosworth99

1

Mengapa bahkan melakukan hal seperti ini dan menyulitkannya lebih dari yang seharusnya? Saya tidak mengerti beberapa jawaban lol ...

CapturedTree

1

Di sumber halaman saya melihat yang berikut:

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

Jika Anda memasukkan nilai tinggi ke dalam tag, ia akan menggunakan ini sebagai ganti ketinggian yang ditentukan dalam file css.

Steven
sumber

Itu aneh karena ini adalah apa yang saya lihat di sumber halaman: <div class = "holder"> <tr> <td> <div id = "s7"> <div id = "posts">

Earl Larson

Ok, sementara saya tidak tahu bagaimana Anda mendapatkan kode di atas, saya masuk dan mengubah <div id = "s7"> menjadi <div id = "s7" style = "height: 100%;"> dan itu berhasil. Mungkin menyembunyikan sesuatu dariku? Either way terima kasih :)

Earl Larson

1

Jika Anda benar-benar memposisikan elemen di dalam div, Anda dapat mengatur padding atas dan bawah hingga 50%.

Jadi sesuatu seperti ini:

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

Keith Brown
sumber

1

Saya tidak melihat bagaimana ini bisa bekerja karena 50% relatif terhadap lebar bukan ketinggian elemen yang mengandung, atau apakah saya kehilangan sesuatu di sini?

DrLightman

0

Inilah solusi lain untuk orang yang tidak ingin menggunakannya html, body, .blah { height: 100% }.

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

Luaskan cuplikan

TheMisir
sumber

Mengapa tidak tinggi: 100% berfungsi untuk memperluas div ke ketinggian layar?

Jawaban:

Pendekatan Modern: