Flex header, content, footer layout

Nel codice seguente, voglio che la sezione del contenuto si riempia fino al punto in cui il piè di pagina tocca la parte inferiore dello schermo.

EDIT: forse avrei dovuto essere un po ‘più chiaro con il centro allineato. L’intestazione e il piè di pagina devono essere allineati verticalmente e tutti e tre gli elementi devono iniziare dalla linea verticale sinistra come mostrato di seguito: inserisci la descrizione dell'immagine qui

Come posso raggiungere questo objective?

html, body { margin: 0; padding: 0; } container{ display: flex; flex-direction: column; position: fixed; top: 0; width: 100%; } header { height: 92px; background-color: #FFFFFF; border: 1px solid #DCE5EB; } footer { height: 92px; border: 1px solid #DCE5EB; background-color: #FFFFFF; } .content { height: 700px; flex: auto; background-color: #FFFFFF; } 
 
Header
Content
Footer

Hai dimenticato di aggiungere = nel content della tua class. questo è un semplice errore di battitura.

E per il tuo contenuto. Come hai altezza statica per l’ header e il footer . Puoi dare un’altezza di 100vh al tuo contenuto e ridurre l’altezza header e del footer di footer e non dimenticare di considerare il border ovvero 2px totale. E risolverà il tuo problema.

MODIFICA: l’ line-height verticale può essere ottenuto dando line-height uguale height . E per allinearlo al tuo margine. Puoi utilizzare, margin o padding , a seconda delle tue esigenze. O puoi persino usarlo

 display:flex; align-items:center; 

Rimuovi 94px + 94px dal tuo contenuto

 html, body { margin: 0; padding: 0; } container { display: flex; flex-direction: column; top: 0; border: 10px solid black; } header { display: flex; align-items: center; height: 92px; background-color: #FFFFFF; border: 1px solid #DCE5EB; padding: 0 30px; } footer { height: 92px; display: flex; border: 1px solid #DCE5EB; background-color: #FFFFFF; align-items: center; padding: 0 30px; } .content { min-height: calc(100vh - 94px - 94px); background-color: #FFFFFF; padding: 0 30px; } 
 
Header
Content
Footer

Oltre a flexbox, puoi anche creare questo layout usando la griglia CSS.

violino

 html, body { margin: 0; height: 100%; } .container { display: grid; grid-template-rows: 92px 1fr 92px; height: 100%; } header, footer { display: flex; align-items: center; border: 1px solid #DCE5EB; } .content { overflow: auto; } 
 
Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!
Footer