Yalnızca CSS

'u kullanarak kalan div yüksekliğini doldurun Bir kapsayıcıda iki div: s var.
İlk div, ne kadar alan gerekli olursa olsun, otomatik yüksekliğe sahip olmalıdır.
İkinci div, kabın kalan yüksekliğine sahip olmalıdır.Yalnızca CSS

Bunu Javascript kullanmadan yapmak istiyorum.

CSS'ye özel bir çözüm yok mu? Belki de display:table/display:table-cell veya display:flex kullanıyor musunuz?

Bu display:table ve display:table-row kullanarak (IE7 ve üzeri ile çalışmaz) elde edebiliriz ömeği

<!DOCTYPE html> 
<html> 
<head> 
<title>Stretch</title> 
<style type="text/css"> 
    html { height: 100%; } 
    body { 
     padding: 0 0; 
     margin: 0 0; 
     height: 100%; 
     background: grey; 
    } 
    #container { background: pink; } 
    #autoHeight { background: blue; } 
    #remainingHeight { background: green; } 
</style> 
</head> 

<body> 
    <div id="container"> 
     <div id="autoHeight">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.</div> 

     <div id="remainingHeight">This div should fill out the rest, making the display 
      mainly green. And no, I don't mean to just have green background. It will 
      contain other things.</div> 
    </div> 
</body> 
</html>

kaynak

2013-06-17 ANisus

olası yinelenen http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen -space) –

Çalışmayan.

http://cssdeck.com/labs/elars8pj

html { height: 100%; } 
body {  
    padding:0 0; 
    margin:0 0; 
    height: 100%; 
    background:grey; 
} 
#container { 
    display:table; 
    height:100%; 
    width:100%; 
    background:pink; 
} 
#autoHeight { 
    display:table-row; 
    background:blue; 
} 
#remainingHeight { 
    display:table-row; 
    height:100%; 
    background:green; 
}

([div kalan ekran alanını doldurması olun] arasında

kaynak

2013-06-17 14:17:27 ANisus

cevap

İlgili konular