Yüzde Yüksekliği HTML 5 / CSS

176

Ben <div>CSS belirli bir yüzde yüksekliğine ayarlamak için çalışıyorum , ama sadece içindeki içerikle aynı boyutta kalır. <!DOCTYTPE html>Ancak HTML 5'i <div>kaldırdığımda, tüm sayfayı istediğiniz gibi alarak çalışır . Sayfanın doğrulanmasını istiyorum, ne yapmalıyım?

Ben <div>bir kimliği vardır, bu CSS var page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

html css height

— D. Strout
kaynak

3

İşte heightyüzde değerleri olan CSS özelliğinin basit ve açık bir açıklaması : stackoverflow.com/a/31728799/3597276

— Michael Benjamin

DOCTYPE sorununu ele alıyor: stackoverflow.com/a/32215263/3597276

— Michael Benjamin

371

CSS belirli bir yüzde yüksekliğe div ayarlamaya çalışıyorum

Neyin yüzdesi?

Yüzde yüksekliği ayarlamak için, üst öğesinin (*) açık bir yüksekliği olmalıdır. Bu oldukça belirgindir, çünkü yüksekliği olduğu gibi bırakırsanız auto, blok içeriğinin yüksekliğini alacaktır ... ancak içeriğin kendisinin ebeveynin yüzdesi cinsinden ifade edilen bir yüksekliği varsa, kendinizi biraz yarattınız. Yakalama 22. Tarayıcı vazgeçer ve yalnızca içerik yüksekliğini kullanır.

Bu nedenle div'ın üst öğesinin açık bir heightözelliği olmalıdır . Bu yükseklik de isterseniz bir yüzde olabilir, ancak bu sadece sorunu bir sonraki seviyeye taşır.

Görünümün, yükseklik yüzdesi dahil div her atası div yüksekliğini olmak için <html>ve <body>, olmak zorunda height: 100%, bu yüzden div aşağı açık yüzde yükseklikleri bir zincir vardır.

(*: veya div konumlandırılırsa, konumlandırılacak en yakın ata olan 'içeren blok'.

Alternatif olarak, tüm modern tarayıcılar ve IE> = 9, görünüm yüksekliği ( vh) ve görünüm genişliği ( vw) ile ilişkili olarak yeni CSS birimlerini destekler :

div {
    height:100vh; 
}

Daha fazla bilgi için buraya bakın .

— bobince
kaynak

Portre ekranı yönlendirmesi için çalışmıyor olsa da stackoverflow.com/questions/23198237/…

— Dchris

1

Lütfen Brian Campbell'ın cevabına bakınız, bunun doğru çözüm olduğuna inanıyorum. Bu yanıt geçici bir çözüm gibi görünüyor ve asıl sorunu ele almıyor.

— MG Geliştirici

69

<html>Ve <body>öğelerinde yüksekliği ayarlamanız gerekir ; aksi takdirde yalnızca içeriğe sığacak kadar büyük olurlar. Örneğin :

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

Snippet'i genişlet

— Brian Campbell
kaynak

6

¬_¬ Belgenin yüksekliğini de% 100 olarak ayarlamam gerektiğini anlamak 20 dakikamı aldı. Bunu biraz geç okudum, ama yine de çok parlak. sigh

— omninonsense

Bu, çoğu insanın en çok ne yapılabileceğini merak ederek bir çözüm sağladığı için cevap olarak değerlendirilmelidir, en çok ilk cevabı izleyin ve bunun mümkün olmadığını düşünün ve bunu okumadan başka bir yöntemin var olup olmadığını düşünmek için dolaşın

— codefreaK

Bunun doğru cevap olduğunu kabul ediyorum, yükseklik çalışmıyor çünkü gövde ve html olan üst öğenin ayarlanması gerekiyor. Bu cevap kabul edilen cevap olmalıdır.

— MG Geliştirici

Bu doğru bir cevap değildir - içerik ekranın yüksekliğine uyacağından daha büyükse, içeriğin geri kalanı artık görünmez, bu nedenle yükseklik tarayıcı penceresinin% 100'üne değil, yine% 100'e ayarlanmıştır. içerik. Bu belki mantıklı değil, ancak iki ana tarayıcı olan Firefox ve Chrome'da olan şey budur - sadece deneyin. Böylece kabul edilen cevap tek doğru cevaptır.

— nepdev

15

bobince'nin cevabı hangi durumlarda "yükseklik:% XX;" çalışacak veya çalışmayacak.

Ayarlanmış bir orana sahip bir öğe oluşturmak istiyorsanız (yükseklik: kendi genişliğinin% 'si), bunu yapmanın en iyi yolu yüksekliği kullanarak etkin bir şekilde ayarlamaktır padding-bottom. Kare örneği:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

Kare kap sadece dolgudan yapılacak ve içerik kabı doldurmak için genişleyecektir. 2009'dan bu konuda uzun makale: http://alistapart.com/article/creating-intrinsic-ratios-for-video

— Olex Ponomarenko
kaynak

bu harika çalışıyor. Ayrıca, 100'den fazla öğeyi içeren bir sayfayı yeniden boyutlandırırken tarayıcıda hızlı hisseder. Teşekkürler!

— dean grande

5

Kullanabilirsiniz 100vw / 100vh. CSS3 bize görüntü alanına göre birimler verir. 100vw, görüntü alanı genişliğinin% 100'ü anlamına gelir. 100vh; Yüksekliğin% 100'ü.

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

— Ahmad Aghazadeh
kaynak

4

Selam! Yüzde (%) kullanmak için, üst öğenin% 'sini tanımlamanız gerekir. Eğer kullanırsanız vücudu {height: 100%} o ana yüksekliğinde hiçbir yüzdesi var çünkü çalışmaz. Bu işe için o durumda vücut yüksekliği sen bu eklemelisiniz html {height: 100%}

Diğer durumda, tanımlayan ebeveyn yüzdesinden kurtulmak için

Vücut {yüksekliği: 100vh}

vh görüntü yüksekliği anlamına gelir

Bence yardımcı oluyor

— Md. A. Barik
kaynak

2

Bazen, tüm içeriğin ekranın yüksekliğinden daha az olduğu gibi bir div yüksekliğini koşullu olarak ayarlamak isteyebilirsiniz. Tüm üst öğelerin% 100 olarak ayarlanması, ekran boyutundan daha uzun olduğunda içeriği keser.

Yani, bunun üstesinden gelmenin yolu min yüksekliğini ayarlamaktır:

Üst öğelerin yüksekliklerini otomatik olarak ayarlamasına izin verin Daha sonra ana div öğenizde, üstbilgi ve altbilgi div öğesinin piksel boyutlarını 100vh'den (görünüm birimleri) çıkarın. CSS'de şöyle bir şey:

min-yükseklik: kalk (100vh - 246px);

100vh, ekranın tam uzunluğu, çevresindeki div'ler eksi. Yüksekliği değil min yüksekliği ayarlayarak, ekrandan daha uzun içerik kesilmek yerine akmaya devam eder.

— Jahmic
kaynak