Intestazione / pagina di contenuto con contenuto div che riempie lo spazio disponibile

Quindi sto cercando di creare un semplice layout di intestazione / contenuto in cui la parte del contenuto si estenda fino alla fine della finestra. Farlo con i CSS sembra imansible, senza introdurre troppa complessità considerando quanto sia semplice questo layout.

Per favore, dimmi una sola ragione per cui non dovrei farlo

body, html { height: 100%; padding: 0; margin: 0; } #h{ height: 150px; } #tbl { height: 100%; } 
header
content

E non parlarmi di semantica e di come i tavoli non sono fatti per il layout. Sembra che la maggior parte dei web designer di oggi siano masochisti che trascorrono ore ogni giorno cercando di build layout semplici in modi molto complessi perché amano torturarsi con cose che non contano. Posso sentirti dire già “Ma … ma … John usando divs invece di tables è l’ultima cosa alla moda da fare, non vuoi che ci venga preso in giro dagli altri web designer?”

La mia opinione personale:

Usare le tabelle per il layout è come usare il caffè per rimanere svegli. Non farlo troppo spesso Forse una volta ogni tanto

E certamente non dovremmo importunare persone che usano layout basati su tabelle , specialmente quando non c’è alcun suono, modo cross-browser per fare un particolare layout nei CSS .

Detto ciò…

1. Le tabelle rendono più difficile la progettazione per più dimensioni dello schermo contemporaneamente

La disposizione retriggers è importante in questi giorni. Avere regole CSS diverse per dimensioni di viewport diverse, applicate allo stesso codice HTML, è un buon modo per adattare un sito a tutti gli schermi.

Per progetti molto semplici, tuttavia, un layout basato su tabelle può funzionare a qualsiasi dimensione dello schermo.

2. Le tabelle possono interferire con gli indici dei motori di ricerca, gli screen reader e altre analisi automatiche delle pagine web

In altre parole, non così buono per SEO e accessibilità.

Tuttavia, vale la pena sottolineare che Google ha recentemente ottimizzato il suo algoritmo di ricerca per distinguere tra tabelle di layout e tabelle di dati.

E ci sono alcune tecniche come

per aiutare gli screen reader a gestire le tabelle, sebbene tali hack possano complicarsi .

3. I layout basati su tabelle richiedono la modifica del markup HTML quando si desidera modificare il layout

Ancora una volta, è più bello e concettualmente puro – e spesso più manutenibile – utilizzare l’HTML solo per contenuto / semantica, in modo da poter lasciare il markup da solo quando si apportano modifiche al design. Ma in pratica, in una sostanziale riprogettazione, avresti spesso dovuto apportare comunque delle modifiche all’HTML.

In breve, credo che le linee guida e le migliori pratiche siano più utili delle regole rigide per quanto riguarda le tabelle per il layout. È un atto di equilibrio, e ci sono situazioni in cui le tabelle possono essere, nel complesso, una scelta migliore.

Non usiamo più il layout della tabella perché non sono semantici. I robot e gli screen reader non sono in grado di identificare il contenuto adatto. In secondo luogo, si desidera separare il contenuto dal codice per il layout (distribuzione dei compiti).

Avere un file CSS esterno renderà la tua pagina molto più facile da mantenere. Se hai più di 20 pagine che hanno tutte una tabella per mantenere il contenuto, è molto probabile che tu debba modificare tutti questi documenti per una riprogettazione. Se si utilizzano i CSS e si dispone di un identificatore di larghezza del layout del documento, sarà sufficiente modificare un file .css per modificare definitivamente tutto il layout.

Hai una domanda. Vuoi avere un’area di contenuto sotto la tua intestazione. Questo va bene e in effetti può essere risolto con CSS più complessi, se lo si desidera, ma non deve esserlo.

In primo luogo inizierai ad allargare la tua intestazione. Puoi usare

per quello o usare le voci (h1-h6). Come se ogni bot sapesse> “Oh! Un titolo. Quello è importante!”

Consente di strutturare il tuo documento:

  

Header

Content

Abbiamo un titolo e una larghezza div il nome di class “contenuto statico” per motivi di layout. Puoi cambiare questo nome in qualsiasi cosa tu voglia (senza spazi bianchi e larghezza iniziale di un carattere alfabetico) puoi anche aggiungere più classi, separate da spazi bianchi.

ecco alcuni CSS

 html, body { height: 100%; margin:0; background-color: gray; padding: 0; } h1 { display: block; padding: 20px 10px; background-color: blue; margin: 0px 0px 0px 0px; } .static-content { background-color: red; padding: 10px; margin: 0; } 

Così. Come puoi vedere nel gioco qui: http://jsfiddle.net/NicoO/rC66e/2/ L’area del tuo contenuto può essere rossa (come è). Ma vedi anche lo sfondo grigio. L’elemento sullo sfondo è il body cui puoi lavorare con il corpo come quasi tutti i div .

Quindi, vedi, hai già esteso l’area del tuo contenuto alla parte inferiore del browser. Se vuoi che anche l’area rossa sia in basso, hai diverse opzioni per realizzarlo.

Vedi il violino qui: http://jsfiddle.net/NicoO/rC66e/3/ Ci sono anche altri modi per rendersene conto.

Aggiornare. Se vuoi davvero che l’area rossa sia grande, puoi provare qualcosa di simile a questo: http://jsfiddle.net/NicoO/rC66e/5/

Questa non è una buona soluzione perché non so per cosa la vuoi usare. Potresti solo modellare l’elemento del body e sei pronto per andare. Se vuoi un layout più complesso, dovrai aggiungere il tuo CSS. La soltion in questo violino non è generica come dovrebbe essere. Ma mostra, che puoi fare un sacco di cose con larghezza CSS. Anche se non ci hai davvero mostrato il tuo caso d’uso.

Modifica: Continui a dire “perché non faccio solo un tavolo a due righe?”. Ma d’altra parte si tenta di modificare questa regola per la risposta qui. Perché non hai solo un titolo e un paragrafo? come

Title

content

Puoi aggiungere un colore di sfondo all’elemento del corpo ed essere fatto. Non c’è motivo di fare altro qui.

Modifica finale: hai un punto valido @ John. a volte i CSS possono essere un dolore. Ma è di gran lunga superiore alla disposizione della tabella. Per i problemi più comuni ci sono strumenti come i sistemi di rete cresciuti, che ottengono il massimo dai problemi. W3C sta lavorando per rendere il CSS più potente e facile da usare. Ad esempio con thew new display: grid; proprietà. Se davvero dai una possibilità al css e provi ad aggiungere un nuovo modello di pensiero al modello di scatola, ti aiuterà molto. Con HTML e CSS puoi semplicemente scrivere ciò di cui hai veramente bisogno senza dover avere un tavolo maldestro tutto il tempo. Mi dispiace se ti ho offeso. Ma ti consiglio di valutare i vantaggi e gli svantaggi del layout di table vs css. Ci sono cose carine come i layout reattivi, che non sarai in grado di utilizzare completamente la larghezza di queste vecchie tecniche