Bootstrap satırı özel yüksekliği yüzdesi

Küçük bir web sitesi geliştiriyorum ve bazı sıkıntılarla karşılaşıyorum.Bootstrap satırı özel yüksekliği yüzdesi

İstediğim, "satır" div'in belirli bir yükseklikte yüzde olarak yeniden boyutlandırılmasıdır. Zaten üzerinde arama yaptım ama hiçbir şey benim için iyi değildi.

<body> 
    <nav class="navbar navbar-inverse navbar-static-top"> 
     ... 
    </nav> 
    <!-- END NAVBAR --> 
    <div class="container-fluid"> 
     <div class="row row-first"> 
      <img class="img img-responsive" src="public/img/bg.jpg" /> 
     </div> 
    </div>

sınıf yürürlüğe girmesi o kadar şimdilik "-ilk sıra" hayır kuralları vardır: İşte benim kodudur. "Satır-ilk" div'in viewport'un yüksekliğinin% 80 olmasını istiyorum, ancak onu yeniden boyutlandırmanın tek yolu, div içerisindeki içeriğin içeriğin yüksekliğini takip etmesi için div içerisine bazı içerik koymaktır. benim CSS:

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 

body { 
    font-family: 'Muli', sans-serif; 
} 

.container-fluid { 
    max-height: 100%; 
    padding-left: 0px; 
    padding-right: 0px; 
} 

.row { 
    margin-left: 0px; 
    margin-right: 0px; 
    height:80%; 
} 

.row-first { 

}

kaynak

2015-09-14 panc_fab

div yüksekliği ebeveynin yüksekliğine göre olur. Bu nedenle,% 80'lik bir yükseklik yapmak için, öncelikle ebeveynin yüksekliğini ayarlıyorum.

.container-fluid { 
    height: 100%; 
    padding-left: 0px; 
    padding-right: 0px; 
} 

.row-first { 
    height:80%; 
    overflow: hidden; 
}

Ve keman: İşte css var http://jsfiddle.net/bmwoLkdr/

kendiniz için yüksekliği ile oynamak ve görmek çekinmeyin!

kaynak

2015-09-14 20:48:06 pgruber

Merhaba, yanıt için teşekkürler, ancak benim sorunum, viewport'un% 80'ini, yani görünür tarayıcının yüksekliğinin% 80'ini istiyorum. Yaklaşımınızı kullanarak doğru yüksekliği değiştirebilirim, ancak .container-akışkan kuralı (yükseklik:% 100), konteyner akışkanının viewport yüksekliğinin dışına çıkmasına izin verir (yani kaydırma çubuğu görünür). –

Sadece ".container-fluid" adlı bir subcontainer tanımlayıp "height: 80%;" örneğinde olduğu gibi ayarlayamaz mısınız? – UltraSonja

Bootstrap satırı özel yüksekliği yüzdesi

cevap

İlgili konular