Content
Hello world!
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
layout/flex/03-flex.css 0000644 0001750 0001750 00000001451 13465337351 013716 0 ustar epsi epsi body, html { height: 100%; padding: 0; margin: 0; background-color: white; } .container { display: flex; min-height: 100%; } #leftside { flex: 25%; background-color: #2196f3; border: 2px dashed #0d47a1; margin-right: 5%; padding-left: 1rem; padding-right: 1rem; } #mainside { flex: 70%; display: flex; flex-direction: column; background-color: #1976d2; border: 2px dashed #0d47a1; padding-left: 1rem; padding-right: 1rem; } #top, #bottom, #content { text-align: center; border: 2px dotted #0d47a1; } #top { height: 3rem; background-color: #64b5f6; } #content { margin-top: 2rem; margin-bottom: 2rem; flex: 1 0 auto; background-color: #bbdefb; } #bottom { height: 3rem; flex-shrink: 2; background-color: #64b5f6; } layout/flex/03-flex.html 0000644 0001750 0001750 00000001163 13464575602 014074 0 ustar epsi epsi
Top
Hello world!
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
Hello world!
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
Top
Hello world!
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
Hello world!
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
Hello world!
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
Top
Hello world!
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
Hello world!
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
Top
Hello world!
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
Hello world!
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum