Wypełnij pozostałe div-height za pomocą tylko CSS

Mam dwa div: s w pojemniku.
Pierwszy element div powinien mieć automatyczną wysokość, biorąc dowolne miejsce.
Drugi element div powinien mieć pozostałą wysokość kontenera.Wypełnij pozostałe div-height za pomocą tylko CSS

Chciałbym zrobić to bez JavaScriptu.

Czy nie ma rozwiązania tylko CSS? Może korzystając z display:table/display:table-cell lub display:flex? Przykład

nieprodukcyjnym

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

Źródło

2013-06-17 ANisus

możliwe duplikat [Zrób div wypełnić pozostałą przestrzeń ekranu] (http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen -przestrzeń) –

mogę to osiągnąć stosując display:table i display:table-row (nie działa z IE7 lub starszych).

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; 
}

Źródło

2013-06-17 14:17:27 ANisus

Wypełnij pozostałe div-height za pomocą tylko CSS

Odpowiedz

Powiązane problemy