100vw menyebabkan luapan horizontal, tetapi hanya jika lebih dari satu?

97

Katakanlah Anda memiliki ini:

html, body {margin: 0; padding: 0}
.box {width: 100vw; height: 100vh}

<div class="box">Screen 1</div>

Anda akan mendapatkan sesuatu yang memenuhi layar, tanpa scrollbar. Tapi tambahkan yang lain:

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

Anda tidak hanya mendapatkan scrollbar vertikal (diharapkan), tetapi sedikit scroll horizontal.

Saya menyadari Anda bisa menghilangkan lebarnya, atau mengaturnya menjadi lebar: 100%, tapi saya penasaran mengapa ini terjadi. Bukankah 100vw seharusnya "100% dari lebar viewport"?

css

— rdoyle720.dll
sumber

hindari overflow yang tersembunyi di html dan body. Ini bukan solusi yang baik jika Anda ingin menggunakan posisi sticky pada salah satu elemen turunannya… max-width sepertinya cara yang baik !!!

— NeueDeutsche

149

Seperti yang telah dijelaskan oleh wf4, scroll horizontal hadir karena scroll vertikal. yang dapat Anda selesaikan dengan memberi max-width: 100%.

.box {
    width: 100vw;
    height: 100vh;
    max-width:100%;  /* added */
}

Bekerja Fiddle

— Mr_Green
sumber

3

Terima kasih, ini berfungsi dengan baik untuk memperbaiki masalah, tetapi saya masih berpikir ini adalah perilaku default yang sedikit tidak intuitif.

— Phocks

2

Tentang menjadi tidak intuitif: menurut caniuse.com ini adalah browserbug. caniuse.com/#feat=viewport-units -> Masalah umum 8: Saat ini semua browser kecuali Firefox salah menganggap 100vw sebagai seluruh lebar halaman, termasuk scroll bar vertikal, yang dapat menyebabkan scroll bar horizontal saat overflow: auto disetel .

— Jacob van Lingen

47

Jika max-width: 100%lebar viewport tanpa scrollbar, maka Anda tidak perlu 100vwdi tempat pertama :-) Anda bisa saja menggunakan width: 100%karena elemen tidak memiliki leluhur yang diposisikan, jadi referensinya adalah badan.

— Kapsul tanggal

8

Ini tidak menyelesaikan apapun! max-width hanya berfungsi karena elemennya adalah decendant langsung dari body! Dalam kasus dunia nyata apa pun di mana Anda akan menggunakan 100vw daripada 100%, (Seperti elemen di dalam wadah), ini tidak akan berfungsi.

— Eliezer Berlin

2

Saya tidak dapat menggunakan lebar 100% karena div saya berada dalam wadah yang saya tidak tahu lebar atau paddingnya. Itulah seluruh alasan untuk menggunakan 100vw, bukan 100%, jadi jawaban ini tidak ada gunanya. Dan itu juga terjadi di Mac jika pengaturan Anda adalah untuk selalu menampilkan scrollbar, meskipun tidak ada scrollbar.

— Curtis

37

scrollbar akan dimasukkan vwsehingga scroll horizontal akan ditambahkan untuk memungkinkan Anda melihat di bawah scroll vertikal.

Jika Anda hanya memiliki 1 kotak, lebar 100% x tinggi 100%. Setelah Anda menambahkan 2, lebar 100% x tinggi 200%, oleh karena itu memicu scrollbar vertikal. Saat bilah gulir vertikal dipicu, itu kemudian memicu bilah gulir horizontal.

Anda bisa menambahkan overflow-x:hiddenkebody

html, body {margin: 0; padding: 0; overflow-x:hidden;}
.box {width: 100vw; height: 100vh; background-color:#ff0000}
.box2 {width: 100vw; height: 100vh; background-color:#ffff00}

http://jsfiddle.net/NBzVV/

— wf4
sumber

1

Melakukan ini menyebabkan konten muncul di bawah scrollbar. jsfiddle.net/NBzVV/1 Agar ini menjadi solusi yang sesuai, Anda perlu menambahkan padding yang tepat.

— James Donnelly

1

Ya, terlihat bagus. Menambahkan max-width:100%ke .boxakan mencegahnya.

— wf4

4

"jadi gulungan horizontal akan ditambahkan untuk memungkinkan Anda melihat di bawah gulungan vertikal" <- kalimat ini membantu otak saya memahami secara visual apa yang sebenarnya terjadi. +1

— Ivan Durst

Hanya catatan tentang overflowbahkan jika Anda menambahkannya ke hal x- postition: stickyhal yang tidak ada yang akan berfungsi.

— T. Chmelevskij

9

Saya memiliki masalah serupa dan menemukan solusi berikut menggunakan variabel JS dan CSS.

JS:

function setVw() {
  let vw = document.documentElement.clientWidth / 100;
  document.documentElement.style.setProperty('--vw', `${vw}px`);
}

setVw();
window.addEventListener('resize', setVw);

CSS:

width: calc((var(--vw, 1vw) * 100);

1vw adalah nilai fallback.

— Stepan Shatkovski
sumber

1

Suka ini. cukup elegan

— andrevenancio

Ini sempurna karena kemudian tersedia secara global. Terima kasih.

— fvaldez421

2

Pembaruan: Pada Chrome versi 66, saya tidak dapat mereproduksi perilaku yang dilaporkan oleh pertanyaan lagi. Tampaknya tidak ada solusi yang diperlukan.

Jawaban Asli

Ini sebenarnya adalah bug seperti yang dilaporkan dalam jawaban ini dan komentar di atas.

Sementara solusi dalam jawaban yang diterima (menambahkan .box {max-width: 100%;}) umumnya berfungsi, saya merasa perlu dicatat bahwa saat ini tidak berfungsi untuk display:table(diuji di Chrome). Dalam hal ini, satu-satunya solusi yang saya temukan adalah menggunakan width:100%sebagai gantinya.

Broken Fiddle dengandisplay:table
Bekerja dengan Fiddledisplay:table danwidth:100%

— Cornflex
sumber

Uhm, apakah jawaban yang diterima berubah? Anda menyarankan hal yang sama dengan jawaban yang diterima. Inilah sebabnya mengapa jawaban harus lengkap dengan sendirinya.

— Kissaki

Jawaban yang diterima mengusulkan penambahan max-width: 100%. Saya mengusulkan width: 100vwuntuk berubah menjadi width: 100%. Saya memperbarui jawaban saya menjadi mandiri.

— Cornflex

Ada browser lain selain Chrome, dan beberapa menangani scrollbar secara berbeda.

— LocalPCGuy

1

untuk menghilangkan lebar scrollbar yang termasuk dalam vw saya harus melakukan ini:

html, body {
    overflow-x: hidden;
    height: 100vh;
}

— manuel-84
sumber

1

*,
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;/*add This*/ 
}
/*and enjoy ^_^ */

— pengguna13149444
sumber

6

Menyembunyikan masalah tidak menyelesaikannya. Meskipun pendekatan Anda memang menghilangkan overflow, itu hanya menyembunyikannya. Ini dapat menyebabkan masalah ketika konten harus ditampilkan di luar (karena alasan apa pun)

— Daniel Steiner

3

Hai pengguna13149444! Jawaban hanya kode dapat menyelesaikan masalah, tetapi akan jauh lebih berguna jika Anda menjelaskan cara mereka menyelesaikannya. Komunitas membutuhkan teori dan juga kode untuk memahami jawaban Anda sepenuhnya.

— NSP