Başlıkta belirtildiği gibi vw, kaydırma çubukları olmadan sadece css'de hesaplamak mümkün müdür ?
Örneğin, ekranımın genişliği 1920px. vwdöner 1920px, harika. Ama gerçek vücut genişliğim sadece buna benzer 1903px.
1903pxDeğeri yalnızca css ile almamın bir yolu var mı (yalnızca the'nin doğrudan alt öğeleri için değil body) yoksa bunun için kesinlikle JavaScript'e ihtiyacım var mı?
width: calc(100vw - scrollbarWidth)
Yanıtlar:
Bunu yapmanın bir yolu calc ile. Bildiğim kadarıyla% 100, kaydırma çubukları dahil genişliktir. Yani eğer yaparsan:
body {
width: calc(100vw - (100vw - 100%));
}
100vw eksi kaydırma çubuğunun genişliğini elde edersiniz.
Örneğin görüntü alanının% 50'si olan bir kare istiyorsanız, bunu yükseklik ile de yapabilirsiniz (eksi skllbar genişliğinin% 50'si)
.box {
width: calc(50vw - ((100vw - 100%)/2))
height: 0
padding-bottom: calc(50vw - ((100vw - 100%)/2))
}
bodyöğesi veya aynı genişliğe sahip bir öğe ise işe yarar body(aksi takdirde 100%yanlış öğenin genişliğine işaret eder). Bu durumda yüzdeleri kullanabilirsiniz. Bir şey kaçırmadığım müddetçe?
100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100% şeyi özlüyor muyum?
Bunu, belge yüklendikten sonra bir CSS değişkeni tanımlamak için bir javascript satırı ekleyerek yapıyorum:
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
daha sonra CSS'de var(--scrollbar-width), farklı genişliklerde kaydırma çubukları olan / olmayan farklı tarayıcılar için ihtiyacınız olan ayarlamaları yapmak için kullanabilirsiniz . Yatay kaydırma çubuğu için, gerekirse innerWidthile innerHeightve clientWidthile değiştirerek benzer bir şey yapabilirsiniz clientHeight.
Göre özellikleri , görünüm penceresi göreli uzunluk birimleri dikkate kaydırma çubukları almazlar (ve aslında, onlar değil var olduğunu varsayın).
Dolayısıyla, amaçladığınız davranış ne olursa olsun, bu birimleri kullanırken kaydırma çubuklarını hesaba katamazsınız.
vwspesifikasyon başına, herhangi bir kaydırma çubuğunun varlığından haberdar değiller. Yani onları hesaba katamazsınız.
overflow-y: scrollvs olarak ayarlamak overflow-y: autovw birimleri için hesaplanan değeri değiştirmiyor. Özellikle sitemde 3.82vw olarak ayarlanmış bir şey var ve bilgisayar genişliğim 1920px. Otomatik taşma ile, 3.82vw = 73.344px, ve sonra da 73.344px veren taşma kaydırma ile denedim, eğer doğruysanız 72.6946px çıkarması gerektiğinde değişiklik yok
Webkit tarayıcıları kaydırma çubuklarını hariç tutar, diğerleri döndürülen genişliğe dahil eder. Bu elbette sorunlara yol açabilir: örneğin dinamik olarak yükseklik ekleyen ajax ile dinamik olarak oluşturulmuş içeriğiniz varsa, Safari sayfa görselleştirme sırasında bir düzenden diğerine geçebilir ... Tamam, bu pek sık olmaz, ancak farkında olun. Mobil cihazlarda daha az sorun, çünkü kaydırma çubukları genellikle gösterilmez.
Bununla birlikte, sorununuz tüm tarayıcıda kaydırma çubukları olmadan tam olarak görüntü alanı genişliğini hesaplamaksa, bildiğim kadarıyla, iyi bir yöntem şudur:
width = $('body').innerWidth();
önceden ayarlanmış:
body {
margin:0;
}
vwÜnite almaz overflow-ydikkate kaydırma çubuğunu overflow-yayarlandığındaauto .
Olarak değiştirin overflow-y: scroll;ve vwbirim kaydırma çubuğunun bulunduğu görüntü alanı olacaktır. Daha sonra kaydırma çubuğu boyutunu calc () kullanarak vw değerinden çıkarabilirsiniz. Kaydırma çubuğu genişliğini de tanımlayabilirsiniz, böylece tarayıcıdan bağımsız olacaktır.
Sadece hesaba katılması dezavantajı. İçerik ekrana sığarsa, yine de kaydırma çubuğu gösterilir. Olası bir çözüm değişim etmektir autoiçin scrolljavascript.
overflow-x?
overflow-y: scroll;
Kodunuzu "calc" ile karıştırmadan çalışmasını bulmamın tek yolu, kapsayıcı öğesi boyutunu 100vw yapmaktır; Overflow-x için konteynerin etrafına bir sarıcı ekleme; Bu, kaydırma çubuğunun içeriğin üzerindeymiş gibi kapsayıcının tam genişlikte olmasını sağlar.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{ overflow-y: scroll; }
html, body{ padding:0; margin: 0;}
#wrapper{ overflow-x: hidden; }
.row{ width: 100vw; }
.row:after{ clear: both; content: ''; display: block; overflow: hidden; }
.row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
.row-right{ background: red; float: right; height: 40vh; width: 50vw; }
</style>
</head>
<body>
<div id="wrapper">
<div class="row">
<div class="row-left"></div>
<div class="row-right"></div>
</div>
</div>
</body>
</html>Durum kaydırıcıya benzer bir şeyse: Birçok cevapta yayınlandığı gibi, genişlik% 100 kaydırma çubuğunu hesaba katmazken, 100vw yapar. Pencerenin genişliğini alması gereken ve halihazırda% 100 pencere genişliğine sahip (veya doğal blok genişliği böyle olan) bir konteynerin içine yerleştirilmiş birçok öğeye sahip olmanız durumunda, şunları kullanabilirsiniz:
100vw = kaydırma çubuğuyla ekranın genişliği% 100 = kaydırma çubuğu olmayan ekranın genişliği
Ekran genişliğini ölçerken her zaman calc (% 100 - 50px) kullanılması tercih edilir. Kaydırma çubuğunun doğrudan görülebildiği Windows tarayıcılarında bile, macOS tarayıcıları ile karşılaştırıldığında ekran genişliğini farklı şekilde döndürün.
benim durumumda bir div 100wh - 230px ayarlamam gerekiyor ve yaptığım bu ekstra kaydırma genişliğiyle aynı sorunla karşılaşıyordum:
width: calc(100vw - (100vw - 100%) - 230px);
Bu benim çözümüm değil, ancak tam genişlikte olmayan göreceli öğede mutlak olan açılır tam genişlikte menü oluşturmama yardımcı oluyor.
Css var in: root ile kaydırmalı ve sonra kullanmalıyız.
:root{
--scrollbar-width: calc(100vw - 100%);
}
div { margin-right: var(--scrollbar-width); }