it-swarm.com.de

Moderne Möglichkeit, Layouts mit 100% Höhe in HTML5 und CSS3 zu markieren

Ich bin seit einiger Zeit von der Markierung von Websites weg. Jetzt haben wir HTML5 und viele neue Funktionen in CSS. Ich habe ein gemeinsames Site-Layout mit fester Kopf- und Fußzeile. Und natürlich der Hauptinhaltsbereich dazwischen. Standardmäßig sollte die Seite 100% der Fensterhöhe einnehmen (d. H. Der Inhaltsbereich wird erweitert). Und wenn der Inhalt lang ist, wird die vertikale Bildlaufleiste angezeigt und alle wie üblich ..__ Normalerweise habe ich das so gemacht:

<body>
   <table id="main" ...>
      <tr>
         <td id="header-and-content">
            <div id="header">contains logo, nav and has fixed height</div>
            <div id="content">actual content</div>
         </td>
      </tr>
      <tr>
         <td id="footer">
           fixed size footer
         </td>
      </tr>
   </table>
</body>

Und begleitende css:

html, body { height:100% }
table#main { height:100% }
td#footer { height:123px }

Es ist also veraltet. Sie, die sich über neue Markup-Techniken auf dem Laufenden halten, wie es jetzt im Jahr 2011 gemacht wird? 

UPD Leute, nicht über semantisches Markup oder die Verwendung von divs. Ich weiß was es bedeutet. Ausgabe jetzt in - Wie sage ich die Fußzeile, auch wenn der Inhalt leer oder kurz ist. Wenn der Inhalt lang genug ist, gehen Sie in die Fußzeile wie in anderen Fällen. Absolut und fix ist nicht die Lösung (zumindest in ihrer Grundform)

EINIGE SUMMARY UPDATE

  1. Ich habe Methode mit der Verwendung von Anzeige: Tabelle und Anzeige: Tabelle-Zeile ausprobiert und es funktioniert: wenig Inhalt , mehr Inhalt
  2. Methode Die Fußzeile am unteren Rand einer Seite kleben wurde von Andrej empfohlen. Es funktioniert auch: wenig Inhalt , mehr Inhalt

Einige Enttäuschung, obwohl ich das Gefühl habe: Die erste Methode besteht nur aus diesen Tabellen, jedoch ohne table-Tag. Das zweite ist wirklich alt, ich habe es vermieden, es zu benutzen, weil es Hack ähnelt. Mein Gott, nichts Neues :)

21
dmitry

Nun, vor allem in 2011 verwenden wir keine Tabellen mehr für das Layout!

Wenn ich Sie wäre, würde ich das Markup so schreiben:

<body>
   <div id="main" role="main">
        <header>
            contains logo, nav and has fixed height
        </header>
        <div class="content"> /*use <article> or <section> if it is appropriate - if not sure what to use, use a div*/
            actual content
        </div>
        <footer>
            fixed size footer
        </footer>
    </div>
</body>

Und das CSS wäre mit Ausnahme der geänderten Selektoren das gleiche

html, body { height:100% }
#main { height:100% }
footer { height:123px }

Für eine feste Fußzeile würde ich vorschlagen, position:absolute oder vielleicht position:fixed zu verwenden - es hängt davon ab, wie sich die Fußzeile verhalten soll (blättern Sie mit der Seite oder bleiben Sie immer unten).

Um eine "klebrige" Fußzeile zu erstellen, befindet sich diese am unteren Rand der Seite, bewegt sich jedoch mit dem Inhalt. Diese Methode wird den Trick ausführen.

12
Oskar

Im Jahr 2013 gibt es immer noch nichts, was einen anständigen Tisch mit dem Kopf/Fuß/Körper übertrifft.

Die folgende (gültige HTML5-Seite) enthält eine feste Kopf- und Fußzeile, eine Höhe von 100% und keine Größenänderung.

<!DOCTYPE html>    
<meta charset="utf-8" />
<title>valid HTML5 / fixed header and footer / nada CSS sizing trouble</title>
<style type="text/css">

html, body, table { height:                 100% }    
th {                height:                 80px }    
#f {                height:                 40px }

table {             width:                  1000px }

html, body {        margin:                 0 }
table {             margin:                 0 auto }

td {                text-align:             left }      
html, body {        text-align:             center } /* important for old browsers */
th {                text-align:             right }

html, body {        background-color:       rgb(148,0,211) } 
#m {                background-color:       #f39 }

#m {                -webkit-border-radius:  25px;    
                    -khtml-border-radius:   25px;    
                    -moz-border-radius:     25px;    
                    -ms-border-radius:      25px;      
                    -o-border-radius:       25px;      
                    border-radius:          25px; }
</style>
<table>      
  <thead><tr><th>       head</th></tr></thead>
  <tfoot><tr><td id="f">foot</td></tr></tfoot>
  <tbody><tr><td id="m">main</td></tr></tbody>
</table>
6
Leo

Da Sie nach "modern" gefragt haben ... anno 2016 habe ich vielleicht eine bessere Antwort als in 2013:

verwenden Sie die 100vh-Lösung in CSS3. vh ist eine neue Einheit und steht für ViewPort height.

html, body {            height:                 100% } 
header {                height:                 100px }
footer {                height:                 50px }
main {                  height:                 calc(100vh - 150px); }

html, body {            width:                  100% }  
header, main, footer {  width:                  1000px }

html, body {            margin:                 0 }
header, main, footer {  margin:                 0 auto }

html, body {            padding:                0 }

html, body {            text-align:             center }

body {                  background-color:       white } 
header {                background-color:       yellow }
main {                  background-color:       orange }
footer {                background-color:       red }
<!DOCTYPE html>
<meta charset="utf-8" />
<title>test</title>
<header>bla</header>
<main>bla</main>
<footer>bla</footer>

Wenn Sie jedoch mit alten Browsern kompatibel sein möchten, verwenden Sie den Code in meiner Antwort von 2013.

2
Leo

Technisch gesehen könnten Sie wahrscheinlich immer noch damit fertig werden, Ihre Seite mit Tabellen-Tags zu versehen, aber dies wird jetzt als schlechte Praxis betrachtet. Es wird als bewährte Methode betrachtet, "semantisches" Web-Markup zu verwenden. Das bedeutet, Tags für die vorgesehenen Zwecke zu verwenden, sodass ein Table-Tag zur Darstellung von Tabellendaten und nicht unsichtbaren Designs verwendet werden sollte. DIVs sind für die Gestaltung Ihres unsichtbaren Seitenlayouts vorgesehen. Eine separate Liste ist eine großartige Website-Ressource, um diese Konzepte zu verstehen. 

Dieser Artikel ist gut für das Verständnis von semantischem Markup: http://www.alistapart.com/articles/12lessonsCSSandstandards

Alles, was gesagt wurde, hier ist eine Beispielseite, die macht, was Sie wollen:

http://peterned.home.xs4all.nl/examples/csslayout1.html

1
Ben L

Da die Forderung nach "modern" UND "kompatibel" ohnehin eine Kontraktion ist, wurde die Rastermethode bisher noch nicht erwähnt und ist im Moment zu modern, aber mit einigen Anpassungen könnte eine Lösung gefunden werden.

Dieser Artikel (und die Zeiger) - mit komplexerer Verwendung - ist großartig zu lesen: https://developers.google.com/web/updates/2017/01/01/css-grid

Nun sieht der Code zwar gut aus, aber Browser tun das nicht ... - also habe ich etwas Zwang hinzugefügt.

https://jsfiddle.net/qLcjg6L6/1/

<!DOCTYPE html>
<html>
<head>
<style>

html, body {
            height:             100%;
            min-height:         100vh;
            margin:             0;
            padding:            0 }

body {      display:            grid;
            grid-template-rows: minmax(auto, min-content) auto minmax(auto, min-content);
            grid-template-columns: 100% }

header {    background:         red }
main {      background:         pink }
footer {    background:         purple }

/* as this code is yet far from well-supported, here's a brute force... */
header {    height:             70px }
footer {    height:             60px }
main {      height:             calc(100vh - 130px); }
/* 130px being the sum of header/footer - adapt to your desired size/unit */

</style>
</head>
<body>
<header>hdr</header>
<main>main</main>
<footer>foot</footer>
</body>
</html>
1
Leo

Heute würde man das so machen (eigentlich nicht viel anders)

http://jsfiddle.net/5YHX7/3/

html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }

und

<html><body><div></div></body></html>
1
Jan Dragsbaek

Bisher hat niemand die Flex-Box-Methode erwähnt

https://jsfiddle.net/55r7n9or/

<!DOCTYPE html>
<html>
<head>
<style>

html, body, div {
            height:         100%;
            margin:         0;
            padding:        0 }

div {       display:        flex;
            flex-direction: column }

main {      flex:           1 }

header {    background:     red }
main {      background:     pink }
footer {    background:     purple }

</style>
</head>
<body>
<div>
  <header>hdr</header>
  <main>main</main>
  <footer>foot</footer>
</div>
</body>
</html>
0
Leo

Lassen Sie mich meinen Beitrag hinzufügen, indem Sie Ihrem Kopf-/Haupt-/Fußzeilenlayout 3 Spalten hinzufügen:

http://jsfiddle.net/ESrG9/

<!DOCTYPE html>
<table>
    <thead>
        <tr id="header">
            <th colspan="3">head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="left">main</td>
            <td id="main">main</td>
            <td id="right">main</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td id="footer" colspan="3">foot</td>
        </tr>
    </tfoot>
</table>
0
Gazmend Hoxha