Yükseklik neden:% 100, div'leri ekran yüksekliğine genişletmek için çalışıyor?

295

Atlıkarınca DIV (s7) 'nin tüm ekranın yüksekliğine genişlemesini istiyorum. Neden başarılı olamadığı hakkında bir fikrim yok. Sayfayı görmek için buraya gidebilirsiniz .

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">

Snippet'i genişlet

html css height

— Earl Larson
kaynak

2

İşte basit ve net bir açıklama: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

tüm pencerenin yüksekliğine kadar

— uzanmaması

410

Yüzde değerinin yükseklik için çalışabilmesi için ebeveynin yüksekliği belirlenmelidir. Tek istisna, yüzde yüksekliği olabilen kök öğedir <html>. .

Yani, hariç tüm öğelerinizin yüksekliğini <html>verdiniz, yapmanız gereken bunu eklemektir:

html {
    height: 100%;
}

Ve kodunuz iyi çalışmalıdır.

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

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

Snippet'i genişlet

JsFiddle örneği .

— Madara'nın Hayaleti
kaynak

23

Tamam, bu yüzden beni inanılmaz aptal gibi olabilir, ama ne olursa olsun : Bunu demek Do <html>bir olan gerçek eleman - tıpkı <p>veya <img />? Tek amacının <html>bir HTML belgesinin başlangıcını ve sonunu tanımlamak olduğunu düşündüm . Demek istediğim, orada olduğunu düşündüm, mizanpaj için değil, ama tarayıcı baktığı belge türünü biliyor mu? Tamamen aklı başındayım.

— jay_t55

29

@Joey: HTML olan gerçek bir unsur. CSS ile stil uygulayabilir, JavaScript'e etkinlikleri bağlayabilir, sınıflar ve kimlikler ekleyebilir ve DOM'da görünür. Tarayıcı, <html>etiketi olmadan ve hatta <head>veya <body>elemanları olmadan bir HTML belgesi alır . Ancak HTML özellikleri <html>etiketi zorunlu sayıyor. Kısacası, evet, diğer tüm HTML öğeleri gibi tam teşekküllü bir elementtir.

— Madara'nın Hayaleti

1

@SecondRikudo: Hayır, <html>etiket özelliklere göre isteğe bağlıdır (örn. HTML4 ve HTML5). Ve evet, eleman yine de yaratılıyor.

— Robert Siemer

2

hmmm ... benim için tek yol bu oldu çalışmış hem ayarlamak htmlve bodyyanı height: 100%(yanı elbette spesifik olarak div% 100 yüksekliğini devralmak istediğiniz)

— James

1

@james Evet, tüm ebeveynlerin bilinen bir yüksekliği olmalıdır.

— Madara'nın Hayaleti

147

_{Kimse bundan bahsetmediği için ..}

Modern Yaklaşım:

html/ bodyElementin yüksekliklerinin ikisini birden ayarlamaya alternatif olarak 100%, görünüm alanı yüzde uzunluklarını da kullanabilirsiniz:

5.1.2. Görünüm yüzdesi uzunlukları: 'vw', 'vh', 'vmin', 'vmax' birimleri

Görünüm yüzdesi uzunlukları, ilk içeren bloğun boyutuna göredir. İlk içeren bloğun yüksekliği veya genişliği değiştirildiğinde, bunlar uygun şekilde ölçeklenir.

Bu örnekte, değeri 100vh(görünümün yüksekliği olan) kullanabilirsiniz - (örnek)

body {
    height: 100vh;
}

Ayarlamak min-heightda işe yarar. (misal)

body {
    min-height: 100vh;
}

Bu birimler çoğu modern tarayıcıda desteklenir - destek burada bulunabilir .

— Josh Crozier
kaynak

1

Hiç fayda görmüyorum. Tarayıcı görünüm penceresi ile ilgili her şeyi hesaplaması gereken tarayıcı için fazladan çalışma oluşturmuyor mu? Viewport boyutlandırma, yalnızca tarayıcı yüksekliğiyle ilgili bir şeyi boyutlandırmak istediğinizde yararlı görünür.

— Robert

12

@RobertWent Yararları var. Örneğin, height: 100%yalnızca üst öğe tanımlanmış bir yüksekliğe sahipse çalışır. Bir öğenin üst öğesinin tanımlanmış bir yüksekliğe sahip olmadığı ve görünüm alanı yüzde birimlerinin bunu çözdüğü bazı durumlar kesinlikle vardır. Başka bir deyişle, derin yuvalanmış bir öğeniz varsa, basitçe ayarlayabilirsiniz 100vhve 100%tarayıcının yüksekliği olacaktır . Sen herhangi bir yarar görmeyebilir, ama onlar tek çözüm olduğunu sayısız durumlarda olmuştur. Bu birimler html/ gibi kök elementler için yararlı olmayabilir body, ancak yine de bu bir alternatiftir

— Josh Crozier

2

Ama derin iç içe bir unsurdan değil, vücut elementinden bahsediyoruz. Html öğesi olan yalnızca bir üst öğe olabilir. Bu yüzden hiçbir fayda görmediğimi ve sadece% 100'ü ayarlamaktan daha kötü olduğunu söylemiştim. Yorumunuz beni zayıflatacak hiçbir şey söylemiyor. Bir şey yeni olduğu için onu daha iyi hale getirmez. Ancak bu bir alternatiftir.

— Robert

4

Bu yaklaşımla ilgili bir sorun, iPhone'ların adres çubuğunu ve altta gezinmeyi görünüm yüksekliğinden hariç tutmasıdır; bu body { height: 100vh }, ilk sayfa yüklemesinde bir kaydırma çubuğuna sahip olacağı anlamına gelir .

— BHOLT

2

Güzel. Diğer yaklaşımı denedim, height: 100% !important" to each parent til html'yi başarılı bir şekilde koydum, dom'da ağacın her düğümünün aslında 100%olduğunu görebiliyordum, ancak istenen öğede% 100'ü ayarlayamadım, ancak görünüm stili ile kolaydı

— pmiranda

25

Ayrıca htmlöğe üzerinde% 100 yükseklik ayarlamanız gerekir :

html { height:100%; }

— shanethehat
kaynak

20

Alternatif olarak, kullanmak eğer position: absoluteo zaman height: 100%sadece para cezası çalışacaktır.

— Steve Tauber
kaynak

4

Düzenimi oluşturmak için flexbox kullanmıyorsam harika bir düzeltme olurdu. : /

— Landon Call

2

Ayarlamayı width:100%;ve ebeveyni unutmayın position:relative;.

— Kai Noack

8

Üst öğelerle denemelisiniz;

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

O zaman bu yeterli olacak:

#s7 {
   height: 100%;
}

— mrbengi
kaynak

5

örneğin, sol bir sütun (yükseklik% 100) ve içeriği (otomatik yükseklik) kullanmak istiyorsanız mutlak kullanabilirsiniz:

#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 */
}

html biçiminde:

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

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

— YellowMart
kaynak

2

Bu ideal olmayabilir ama her zaman javascript ile yapabilirsiniz. Ya da benim durumumda jQuery

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

— OBO
kaynak

5

Yalnız css yeterli olduğunda javascript kullanmak için iyi bir fikir asla.

— Bosworth99

1

Neden böyle bir şey yapar ve olması gerekenden daha karmaşık hale getirir? Bazı cevapları anlamıyorum lol ...

— CapturedTree

1

Sayfa kaynağında aşağıdakileri görüyorum:

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

Yükseklik değerini etikete koyarsanız, css dosyasında tanımlanan yükseklik yerine bunu kullanır.

— Steven
kaynak

Bu tuhaf çünkü sayfa kaynağında gördüğüm şey: <div class = "holder"> <tr> <td> <div id = "s7"> <div id = "posts">

— Earl Larson

Tamam, yukarıdaki kodunuzu nasıl aldığınızı bilmiyorum, içeri girdim ve <div id = "s7"> öğesini <div id = "s7" style = "height: 100%;"> olarak değiştirdim ve işe yaradı. Belki de benden bir şey saklıyor? Her iki şekilde de teşekkür ederim :)

— Earl Larson

1

Elemanları kesinlikle div'ın içine yerleştirirseniz, dolgu üst ve altını% 50'ye ayarlayabilirsiniz.

Yani böyle bir şey:

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

— Keith Brown
kaynak

1

% 50 içeren elemanın yüksekliğine değil genişliğine göreceli olduğu için bunun nasıl çalışabileceğini görmüyorum, yoksa burada bir şey mi eksik?

— DrLightman

0

İşte kullanmak istemeyen insanlar için başka bir çözüm 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>

Snippet'i genişlet

— TheMisir
kaynak