Unit CSS - Apa perbedaan antara vh / vw dan%?

Question 1

Saya baru saja belajar tentang unit CSS baru dan tidak umum. vhdan vwmengukur masing-masing persentase tinggi dan lebar viewport.

Saya melihat pertanyaan ini dari Stack Overflow, tetapi itu membuat unit terlihat lebih mirip.

Bagaimana cara kerja unit vw dan vh

Jawabannya secara spesifik mengatakan

vw dan vh adalah persentase dari lebar dan tinggi jendela, masing-masing: 100vw adalah 100% dari lebar, 80vw adalah 80%, dll.

Ini sepertinya sama persis dengan %unit, yang lebih umum.

Di Alat Pengembang, saya mencoba mengubah nilai dari vw / vh menjadi% dan sebaliknya dan mendapatkan hasil yang sama.

Apakah ada perbedaan diantara keduanya? Jika tidak, mengapa unit baru ini diperkenalkan CSS3?

Question 2

100%bisa 100%setinggi apapun. Misalnya, jika saya memiliki orang tua divyang 1000pxtinggi, dan anak divyang 100%tingginya, maka anak divitu secara teoritis bisa jauh lebih tinggi daripada tinggi viewport, atau jauh lebih kecil dari tinggi viewport, meskipun itu divditetapkan pada 100%tinggi .

Jika saya malah membuat anak itu divdisetel ke 100vh, maka itu hanya100% akan mengisi tinggi viewport , dan tidak harus induknya div.

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>

Luaskan cuplikan

Question 3

Saya tahu pertanyaannya sudah sangat lama dan @Josh Beam membahas perbedaan terbesar, tetapi masih ada satu lagi:

Misalkan Anda memiliki <div>, anak langsung <body>yang Anda ingin mengisi seluruh viewport, jadi Anda gunakan width: 100vw; height: 100vh;. Semuanya berfungsi sama seperti width: 100%; height: 100vh;sampai Anda menambahkan lebih banyak konten dan scrollbar vertikal muncul. Karena vwakun scrollbar sebagai bagian dari viewport, width: 100vw;akan sedikit lebih besar dari width: 100%;. Perbedaan kecil ini akhirnya menambahkan scrollbar horizontal (diperlukan bagi pengguna untuk melihat sedikit lebar ekstra itu) dan akibatnya, tingginya juga akan sedikit berbeda pada kedua kasus.

Itu harus dipertimbangkan saat memutuskan mana yang akan digunakan, meskipun ukuran elemen induk sama dengan ukuran area pandang dokumen.

Contoh:

Menggunakan width:100vw;:

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Luaskan cuplikan

Menggunakan width:100%;:

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Luaskan cuplikan

Question 4

Terima kasih atas jawaban dan contoh kode Anda, @IanC. Itu sangat membantu saya. Klarifikasi: Saya yakin yang Anda maksud adalah "scrollbar" saat Anda menulis "sidebar".

Berikut adalah beberapa diskusi terkait tentang unit area pandang yang menghitung bilah gulir yang menurut saya berguna:

Spesifikasi W3C untuk unit vw, vh, vmin, vmax ("panjang persentase viewport") mengatakan "semua scrollbar diasumsikan tidak ada".

Rupanya Firefox mengurangi lebar scrollbar dari 100vw, seperti komentar @ Nolonar di Perbedaan antara Lebar: 100% dan lebar: 100vw? mengamati, mengutip "Can I Use".

Can I Use , mungkin karena ketegangan dengan spesifikasi (?), Mengatakan semua browser selain Firefox saat ini "salah" menganggap 100vw sebagai lebar halaman secara keseluruhan termasuk scroll bar vertikal.

Question 5

unit vw (view-width) dan vh (view-height) berhubungan dengan ukuran view-port, di mana 100vw atau vh adalah 100% dari lebar / tinggi view-port.

Misalnya, jika port tampilan berukuran lebar 1600 piksel, dan Anda menentukan sesuatu sebagai 2vw, itu akan setara dengan 2% dari lebar port tampilan, atau 32 piksel.

% unit selalu didasarkan pada lebar elemen induk dari elemen saat ini

Question 6

Ada perbedaan yang belum tentu dimunculkan. 100vw mencakup lebar bilah scrool, sedangkan 100% tidak menyertakannya. Ini adalah perbedaan kecil, tetapi penting saat melakukan desain.

Answer 1

Saya baru saja belajar tentang unit CSS baru dan tidak umum. vhdan vwmengukur masing-masing persentase tinggi dan lebar viewport.

Saya melihat pertanyaan ini dari Stack Overflow, tetapi itu membuat unit terlihat lebih mirip.

Bagaimana cara kerja unit vw dan vh

Jawabannya secara spesifik mengatakan

vw dan vh adalah persentase dari lebar dan tinggi jendela, masing-masing: 100vw adalah 100% dari lebar, 80vw adalah 80%, dll.

Ini sepertinya sama persis dengan %unit, yang lebih umum.

Di Alat Pengembang, saya mencoba mengubah nilai dari vw / vh menjadi% dan sebaliknya dan mendapatkan hasil yang sama.

Apakah ada perbedaan diantara keduanya? Jika tidak, mengapa unit baru ini diperkenalkan CSS3?

Answer 2

9

Apa yang dilakukan vw / vh adalah menghapus ketergantungan pada induk mana pun dan memungkinkan pengubahan ukuran berdasarkan ukuran viewport.

Stiker

Answer 3

3

Rekan pembaca, jawaban IanC bisa menyelamatkan hari Anda, pastikan untuk memeriksanya.

Skippy le Grand Gourou

Answer 4

100%bisa 100%setinggi apapun. Misalnya, jika saya memiliki orang tua divyang 1000pxtinggi, dan anak divyang 100%tingginya, maka anak divitu secara teoritis bisa jauh lebih tinggi daripada tinggi viewport, atau jauh lebih kecil dari tinggi viewport, meskipun itu divditetapkan pada 100%tinggi .

Jika saya malah membuat anak itu divdisetel ke 100vh, maka itu hanya100% akan mengisi tinggi viewport , dan tidak harus induknya div.

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>

Luaskan cuplikan

Answer 5

Saya memiliki sidebar yang bersarang di dalam "baris" bootstrap dan saya tidak dapat membuatnya menjadi ukuran halaman penuh bahkan setelah menyetel tinggi: 100%. Apa yang berhasil bagi saya adalah 100vh

raghav710

Answer 6

Saya tahu pertanyaannya sudah sangat lama dan @Josh Beam membahas perbedaan terbesar, tetapi masih ada satu lagi:

Misalkan Anda memiliki <div>, anak langsung <body>yang Anda ingin mengisi seluruh viewport, jadi Anda gunakan width: 100vw; height: 100vh;. Semuanya berfungsi sama seperti width: 100%; height: 100vh;sampai Anda menambahkan lebih banyak konten dan scrollbar vertikal muncul. Karena vwakun scrollbar sebagai bagian dari viewport, width: 100vw;akan sedikit lebih besar dari width: 100%;. Perbedaan kecil ini akhirnya menambahkan scrollbar horizontal (diperlukan bagi pengguna untuk melihat sedikit lebar ekstra itu) dan akibatnya, tingginya juga akan sedikit berbeda pada kedua kasus.

Itu harus dipertimbangkan saat memutuskan mana yang akan digunakan, meskipun ukuran elemen induk sama dengan ukuran area pandang dokumen.

Contoh:

Menggunakan width:100vw;:

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Luaskan cuplikan

Menggunakan width:100%;:

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Luaskan cuplikan

Answer 7

3

CSS body { overflow: hidden }akan menyebabkan scrollbar tidak ditampilkan.

Dave F

Answer 8

@DaveF maka Anda tidak akan dapat menggulir jika halaman Anda melebihi area pandang dan Anda menginginkan efek pengguliran vertikal. body { overflow-x: hidden }harus baik

KMA Badshah

Answer 9

Terima kasih atas jawaban dan contoh kode Anda, @IanC. Itu sangat membantu saya. Klarifikasi: Saya yakin yang Anda maksud adalah "scrollbar" saat Anda menulis "sidebar".

Berikut adalah beberapa diskusi terkait tentang unit area pandang yang menghitung bilah gulir yang menurut saya berguna:

Spesifikasi W3C untuk unit vw, vh, vmin, vmax ("panjang persentase viewport") mengatakan "semua scrollbar diasumsikan tidak ada".

Rupanya Firefox mengurangi lebar scrollbar dari 100vw, seperti komentar @ Nolonar di Perbedaan antara Lebar: 100% dan lebar: 100vw? mengamati, mengutip "Can I Use".

Can I Use , mungkin karena ketegangan dengan spesifikasi (?), Mengatakan semua browser selain Firefox saat ini "salah" menganggap 100vw sebagai lebar halaman secara keseluruhan termasuk scroll bar vertikal.

Answer 10

unit vw (view-width) dan vh (view-height) berhubungan dengan ukuran view-port, di mana 100vw atau vh adalah 100% dari lebar / tinggi view-port.

Misalnya, jika port tampilan berukuran lebar 1600 piksel, dan Anda menentukan sesuatu sebagai 2vw, itu akan setara dengan 2% dari lebar port tampilan, atau 32 piksel.

% unit selalu didasarkan pada lebar elemen induk dari elemen saat ini

Answer 11

1

Ada perbedaan yang belum tentu dimunculkan. 100vw mencakup lebar bilah scrool, sedangkan 100% tidak menyertakannya. Ini adalah perbedaan kecil, tetapi penting saat melakukan desain.

sumber

1

Jawaban IanC adalah. "Karena akun vw untuk scrollbar sebagai bagian dari viewport, lebar: 100vw; akan sedikit lebih besar dari lebar: 100% ;."

j08691

Answer 12

1

Jawaban IanC adalah. "Karena akun vw untuk scrollbar sebagai bagian dari viewport, lebar: 100vw; akan sedikit lebih besar dari lebar: 100% ;."

j08691

Unit CSS - Apa perbedaan antara vh / vw dan%?

Jawaban: