dk. Yükseklik:% 100; Yükseklik: 100%; çalışmıyor

Stillerimin nesi yanlış olduğunu anlayamıyorum.
Birisi bana bununla yardımcı olabilir.
Kod örnek:dk. Yükseklik:% 100; Yükseklik: 100%; çalışmıyor

<style type="text/css"> 
.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; min-height:250px; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
<div class="maindiv"> 
    <div class="left_inner">Left Block content</div> 
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

olması gerektiği şekilde (resme bakın) Opera Tarayıcı gibidir: Sample image

kaynak

2012-01-09 wzazza

HTML? –

@MrLister: Yapmıyorsa, şu adresi kullanabilir: http://www.w3schools.com/tags/tag_doctype.asp –

evet Doctype'ım var: – wzazza

Nasıl

http://jsfiddle.net/L9GEa/

(keresinde yaptığı gibi)

Bir sezgisel html öğesi zaten kararlı bir yüksekliğe sahiptir, ancak yok farz olabileceğini Neden (en azından bu bağlamda). Neyse ki (veya tasarıma göre), bu tek eleman yüzde bir yükseklik atandığında belirlenebilen yüksekliğinin benzersiz özelliğine sahiptir. Bu önemli bir kavramdır çünkü bir yüzdelik yüksekliğe atanan diğer herhangi bir elemanın yüksekliğini hesaplamak (belirlemek) için, ebeveyninin boyunu da belirleyebilmeniz gerekir.
CSS ve DOM ile yeterince çalışmış olan herhangi bir kişi size nipelinden nefret ettiğini söyleyecektir. Bunun nedeni, ek bir çalışma gerektiren ve etkilerini düzeltmek için düşünmeyi gerektiren, akışı dışarıdan çekmesidir. Bunun yerine görüntüleme kullanın: satır içi blok, dikey hizalama: üst; Bir uyarı ile o zaman bu elemanlar arasındaki herhangi bir beyaz boşluk etrafında html yorumları eklemeniz gerekir.

CSS

.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px;min-height:250px; 
    /*changes*/ 
    height:100%; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
    /*changes*/ 
    float:none; 
    display:inline-block; 
    vertical-align:top; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
    /*changes*/ 
    float:none; 
    display:inline-block; 
    vertical-align:top; 
} 
/*changes*/ 
html, 
body{ 
    height:100%; 
}

Eğer bir doküman türü var mı

<div class="maindiv"> 
    <div class="left_inner">Left Block content</div><!-- 
    --><div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

kaynak

2013-09-14 05:40:02

Bu çözüm benim için çalıştı, ben de en iyi cevap olarak işaretledim. Teşekkür ederim. – wzazza

Benim deneyimime göre html yorumlarını bırakın ve yazı tipi boyutunu iç konteynerinizde/öğelerinizde ayarlayın, yazı tipi boyutunu ayarlayın ve kullanım dışı satır içi satırını kullanın. Örn. 1rem – Ghost1

deneyin:

<style type="text/css"> 
.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; height: auto; min-height:250px; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; height: 100%; background:#00CC33; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
<div class="maindiv"> 
    <div class="left_inner">Left Block content</div> 
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

Mecbur Çoğu zaman Ana DIV'ye otomatik veya% 100 yükseklik uygulayın.

kaynak

2012-01-09 14:59:45

'daki satır içi öğeler arasındaki beyaz boşluğun, aynı zamanda, dış div için piksel yüksekliğiyle de çalışacağından emin olun. – danijar

Bu işe yaramadı. – wzazza

@sharethis: Değeri bir piksel tabanına uygularsanız% 100 CSS RULE elde edemezsiniz. –

çalıştığını, senin css üstündeki

html, 
body { 
    height:100% 
}

eklemek için beni

DÜZENLEME: benim test:

<!DOCTYPE html> 
<html> 

<head> 
<style> 
html, 
body { 
height:100%; 
} 

.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; height:100%; 
position:relative; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
position:relative; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
</head> 
<body> 
<div class="maindiv"> 
<div class="left_inner">Left Block content</div> 
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div> 
</body> 
</html>

kaynak

2012-04-04 03:09:29 Michel

dk. Yükseklik:% 100; Yükseklik: 100%; çalışmıyor

cevap

İlgili konular