Kann ich dieses Layout mit automatischer Höhe und getäfeltem Layout in CSS erreichen?

Question

Also muss ich diese Art von Layout für eine App haben, die ich schreibe, aber nach drei Tagen kann ich es nicht funktionieren. Kann ich dieses Layout ohne Verwendung von Tabellen oder jQuery erreichen?

Diese fast funktioniert, nur das die Mitteltafel drückt die Fußzeile außerhalb des Bildschirms

body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
#container { 
 
    background-color: #666666; 
 
    overflow: hidden; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
#top { 
 
    display: table-cell; 
 
    background-color: #999999; 
 
    height: 120px; 
 
    width: 100vw; 
 
} 
 
#side1 { 
 
    display: table-cell; 
 
    background-color: #FFFFCC; 
 
    height: 100%; 
 
    width: 100vw; 
 
    clear: both; 
 
    float: left; 
 
} 
 
#footer { 
 
    display: block; 
 
    background-color: #00FFFF; 
 
    height: 30px; 
 
    width: 100vw; 
 
}

<div id="container"> 
 
    <div id="top">top</div> 
 
    <div id="side1">side</div> 
 
    <div id="footer">footer</div> 
 
</div>

Answer 1

Hoffnung i Recht Frage bekam.

Wenn Sie sicherstellen können, dass es absolut positioniert ist und die Höhe auf 100% setzt, passt es zum nächsten relativen Elternteil und zum Körper, wenn es keinen gibt.

Answer 2

Sie können Viewpoert Height und Berechnungsfunktion in CSS verwenden. Kontrolle dieses http://jsbin.com/lodoxetuku/edit?html,css,output

.top{ 
    height:100px; 
    background:red; 
    text-align:center; 
} 
.bottom{ 
    height:100px; 
    background:green; 
    text-align:center; 
} 
.middle{ 
    height:calc(100vh - 220px); 
    background:yellow; 
    text-align:center; 
} 

Answer 3

Sie dies, indem die autofit Abschnitte flex-grow: 1; mit Flex Box tun können

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
header,footer { 
 
    height: 100px; 
 
    background: black; 
 
    color: #fff; 
 
} 
 
section { 
 
    flex-grow: 1; 
 
    display: flex; 
 
} 
 
section aside { 
 
    width: 100px; 
 
    background: #ccc; 
 
} 
 
section main { 
 
    flex-grow: 1; 
 
}

<header>header</header> 
 
<section> 
 
    <aside>aside</aside> 
 
    <main>main</main> 
 
    <aside>aside</aside> 
 
</section> 
 
<footer>footer</footer>