Önceki öğenin yüksekliğini elde edin

Yalnızca önceki CSS öğesi kullanılarak önceki öğenin yüksekliğini alabilir miyim? Dinamik div B. önceki elemanın yüksekliğini bilmek gerekirÖnceki öğenin yüksekliğini elde edin

#b{ 
    height:calc(100vh - heightOfPreviousElement); 
}

yüksekliğini ayarlamak için kalk() fonksiyonunu kullanıyorum. i bildiklerini

, 100vh ekran yüksekliğinin% 100'e eşit olmasıdır.

ben bir sorun var

, flex below.Using yanıtında kod kullanılır. Turuncu rengin yüksekliği daha küçük olur.

kaynak

2016-04-03 JMA

Benim için bir XY sorun var gibi görünüyor. Belki de mizanpaj gibi başka yöntemler kullanılarak mizanpaj yapılabilir, çünkü sadece yüksekliği başka bir elemente (bir kardeşe) göre ayarlıyorsunuz. Ne yazık ki CSS, önceki elemanların veya ebeveynlerin seçilmesine izin vermez (bu yüzden adı ** basamaklı **). Sorunuzu, görsel olarak ne tür bir düzen oluşturmak istediğiniz ve kodunuzun snippet'leri gibi daha fazla ayrıntı içerecek şekilde güncelleyin. Bu, son derece yararlı olacaktır. – Terry

Mümkün iki kopya: http://stackoverflow.com/q/33129660/3597276 –

Esnek kutu kullanarak aradığınız efekti kolayca elde edebilirsiniz. numara sadece bir kısaltmadır olan flex: 1 1 auto kullanılarak ihtiyaç duyulduğunda, boyut olarak büyümesini mavi bir kap (esnek bir yüksekliğe sahip bir) sağlamaktır: bkz

flex-grow: 1; 
flex-shrink: 1; 
flex-basis: auto;

kanıtı kavramı kod pasajı aşağıda:

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: no-wrap; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100vh; 
 
} 
 
.wrapper > div { 
 
    width: 100%; 
 
} 
 
#c1 { 
 
    background-color: #880015; 
 
    color: #fff; 
 
    height: 60px; 
 
    margin-bottom: 10px; 
 
} 
 
#c2 { 
 
    background-color: #ff7f27; 
 
    } 
 
#c3 { 
 
    background-color: #00a2e8; 
 
    flex: 1 1 auto; 
 
    margin-bottom: 10px; 
 
    }

<div class="wrapper"> 
 
    <div id="c1">height: 60px</div> 
 
    <div id="c2">height: auto (determined by content?)</div> 
 
    <div id="c3">flexible height</div> 
 
</div>

kaynak

2016-04-03 20:31:13 Terry

Bu kodu kullandım ama bir sorunum var. Güncellenmiş sorumu görün. – JMA

@JohnArellano Bu, tümünü içerecek kadar yüksek bir kapasiteye sahip olmadığınız için. Bu olduğunda, esnek eleman boyut olarak çöker. Bunu flex-shrink: 0' olarak ayarlayarak bunu önleyebilirsiniz (varsayılan olarak '1'dir). – Terry

Hayır CSS'de bir önceki öğeyi seçemezsiniz.

Önceki öğeyi seçmek ve .css() yöntemini kullanarak yüksekliği uygulamak için JQuery Prev VEYA Parents yöntemiyle ilgilenebilir misiniz?

kaynak

2016-04-03 16:44:31

Önceki öğenin yüksekliğini elde edin

cevap

İlgili konular