• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

main - Element und nested sections 100% height

D

De:Bug

Neues Mitglied
Hallo zusammen,

ich will mir eine Seite erstellen, einen One-Pager und versuche den Inhalt semantisch korrekt zu gliedern. Ich habe meine Inhalte in sections gepackt und diese innerhalb <main> geschachtelt.

Hier das HTML:

PHP: 
<header id="welcome" role="banner">
    <div class="display-table">
        <div class="container">
            <h1>Hallo,</h1>
        </div>
    </div>
</header><!-- /#welcome -->

<main role="main">
    <section id="about">
        <div class="display-table">
            <div class="container">
                <h2>Über mich</h2>
            </div>
        </div>
    </section><!-- /#about -->

    <section id="services">
        <div class="display-table">
            <div class="container">
                <h2>Leistungen</h2>
            </div>
        </div>
    </section><!-- /#services -->

    <section id="references">
        <div class="display-table">
            <div class="container">
                <h2>Referenzen</h2>
            </div>
        </div>
    </section><!-- /#references -->

    <section id="reel">
        <div class="display-table">
            <div class="container">
                <h2>Reel</h2>
            </div>
        </div>
    </section><!-- /#reel -->
</main>
<footer role="contentinfo">
    <div class="container">
        <p>
            Test
        </p>
    </div>
</footer>

Das klappt soweit und ich denke das ist auch in Ordnung so. Leider rutscht mir der Inhalt von <footer> direkt unter die erste section - also direkt unter 100% height von main. Die ganzen Probleme habe ich nicht, wenn ich <main> entferne. Wollte das aber unbedingt mit aufnehmen. Wie kann ich das <footer> - Element wieder unter den Main-Content "schieben"?

Hier der relevante Auszug des Stylesheets:


Code: 
/**
* @section general settings
*/

body,
html
{
  height: 100%;
  width: 100%;
}

body {
  overflow-y: scroll;
}

html {
  min-width: 100%;
  min-height: 100%;
}

header,
section,
{
  height: 100%;
  width: 100%;
  display: table;
  position: relative;
}

main {
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
}

footer {
  height: 100%;
  width: 100%;
  display: table;
  position: relative;
}

/**
* @section general classes
*/

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.display-table {
  display: table-cell;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Kann mir jemand erklären warum sich das so verhält?
Benötige die Sektionen als display:table, daher ich den darin liegenden Inhalt vertikal ausrichten möchte.
 
Zuletzt bearbeitet:
Hallo,

ich kann das Problem aus deinem Quelltext nicht nachvollziehen. Das footer-Element befindet sich unter dem main-Element.

Hast du das mit verschiedenen Browsern getestet?

Hier der relevante Auszug des Stylesheets:
Zum Vergrößern anklicken....

In dem deiner Meinung nach nicht relevanten Teil könnte sich das Problem befinden.

versuche den Inhalt semantisch korrekt zu gliedern.
Zum Vergrößern anklicken....

Dazu gehört auch im body-Bereich auf unnötige Angaben und Elementen zu verzichten. Also weg mit den unnötigen div, id, class u.s.w.

Benötige die Sektionen als display:table,
Zum Vergrößern anklicken....

Dazu wird heutzutage flexbox verwendet.

Gruss

MrMurphy
 
Hallo,

danke Dir für das Feedback. Natürlich habe ich das verschiedenen Browsern getestet. ich denke das Problem liegt an dem umliegenden Main und dessen Höhe.

Hier nochmal der komplette Quelltext:


HTML: 
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hallo</title>
   
    <link href="styles.css" media="screen" rel="stylesheet" type="text/css" />

</head>

<body class="">

<nav>
    <ul>
        <li>
            <a href="#welcome">
                Über mich            </a>
        </li>
        <li>
            <a href="#about">
                Über mich            </a>
        </li>
        <li>
            <a href="#services">
                Leistungen            </a>
        </li>
        <li>
            <a href="#references">
                Referenzen            </a>
        </li>
        <li>
            <a href="#reel">
                Reel            </a>
        </li>
        <li>
            <a href="/de/kontakt" class="external">
                Kontakt            </a>
        </li>
        <li>
            <a href="/de/kundenbereich" class="external">
                Anmelden            </a>
        </li>
    </ul>
</nav>


<header id="welcome" role="banner">
    <div class="display-table">
        <div class="container">
            <h1>Hallo,</h1>
        </div>
    </div>
</header><!-- /#welcome -->

<main role="main">
    <section id="about">
        <div class="display-table">
            <div class="container">
                <h2>Über mich</h2>
            </div>
        </div>
    </section><!-- /#about -->

    <section id="services">
        <div class="display-table">
            <div class="container">
                <h2>Leistungen</h2>
            </div>
        </div>
    </section><!-- /#services -->

    <section id="references">
        <div class="display-table">
            <div class="container">
                <h2>Referenzen</h2>
            </div>
        </div>
    </section><!-- /#references -->

    <section id="reel">
        <div class="display-table">
            <div class="container">
                <h2>Reel</h2>
            </div>
        </div>
    </section><!-- /#reel -->
</main>

<footer role="contentinfo">
    <div class="container">
        <p>
            Test
        </p>
    </div>
</footer>

<script type="text/javascript" src="/resources/vendor/jquery-1.11.3.min.js"></script>
</body>

</html>

Die ID's benötige ich als Anker für meine Navigation und den Container um meinen Content sauber auszurichten. Flexbox werde ich mir gleich mal anschauen.

Danke schonmal.
 
Hallo

Hier der relevante Auszug des Stylesheets:
Zum Vergrößern anklicken....

Stylesheet ist das CSS. Wenn es das Problem gibt müsste es sich hier verstecken.

Die ID's benötige ich als Anker für meine Navigation
Zum Vergrößern anklicken....

Ich habe ja auch von

unnötigen
Zum Vergrößern anklicken....

geschrieben. Anker gehören natürlich in den Quelltext und sind damit notwendig.

und den Container um meinen Content sauber auszurichten.
Zum Vergrößern anklicken....

Das stimmt heutzutage in der Regel nicht mehr.

Grundsätzlich solltest du dir auch überlegen ob deine ganzen height-Angaben wirklich notwending sind. Die Höhe soll sich schließlich nach dem Inhalt richten. Bei den heutzutage üblichen Fenstergrößen von Smartphones über Tablets zu PCs sind height-Angaben eher hinderlich.

Zum eigentlichen Problem:

Du solltest mit deinem hier veröffentlichten Quelltext erst mal selbst eine Seite erstellen, die unabhängig von deinen bisherigen Bemühungen ist. Tritt das Problem damit auch auf?

Gruss

MrMurphy
 
Hab's mal minimiert
Code: 
<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<title>Display TABLE</title>
<style>
* {
margin:0;
padding:0;
}
body, html
{
  height: 100%;
  width: 100%;
}
body {
overflow-y: scroll;
display:table;
}
header {
background:#aaa;
}

main {
background:#dad;
display:table-row;
height:100%;
}

footer {
background:#abc;
}

h1 , h2 {
padding:20px;
}
</style>
</head>

<body>
<header>
<h1>Homepage</h1>
</header>
<main role="main">
<h2>Inhalt</h2>
</main>
<footer>
<h2>Footer</h2>
</footer>
</body>
</html>
Wolltest doch dein Footer bei wenig Inhalt immer unten haben? Wobei Flexbox eine Alternative wär.
 
Zuletzt bearbeitet:
Hallo,

das ist das komplette CSS dafür gewesen.

Zielsetzung der Page ist es jede Sektion, Header und Footer auf 100% Höhe auszuspielen. Diese sollen dann über die nav via jquery "angescrollt" werden.

Natürlich teste ich alle Versionen hier und es hat auch wunderbar funktioniert bis ich das <main> umwrapped habe. Entweder zeigt er keine volle Höhe an, wenn ich <main> keine height von 100% gebe, wenn ja rutscht seltsamerweise der Footer-Content auf Höhe der zweiten Section - also direkt unter die 100% height.

In diesem fall ist das mit heigth gewünscht da es mehr auf Typographie und Gestaltung eght mit wenigen Inhalten. Aus diesem Grund soll das vertikal ausgerichtet werden und bei den small devices aufgelöst werden.

Habe es jetzt mal mit Flexbox probiert, aber jetzt nimmt er mir die 100% der Höhe nicht an.
Muss ich mal weitertüfteln.

Danke djHeke - soweit hatte ich das schon - es geht drum wie ich <main> formatieren muss, das <section> 100% height oder mehr hat.

Danke Euch beiden
 
So funktioniert schon mal die Anordnung - bloß warum nimmt er den hier nicht die volle Höhe? Strange ...

HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sections 100% height</title>
<style>
html {
  height: 100%;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
}

body {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}

header
{
  height: 100%;
  width: 100%;
}

main {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

section {
  height: 100%;
}

/**
 * @section general classes
 */

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

/**
 * @section backgrounds
 */
#welcome     { background: #eee;}
#about         { background: #aaa;}
#services     { background: #666;}
#references { background: #eee;}
#reel         { background: #bbb;}


</style>
</head>

<body>
<nav>
    <ul>
        <li>
            <a href="#welcome">
                Über mich            </a>
        </li>
        <li>
            <a href="#about">
                Über mich            </a>
        </li>
        <li>
            <a href="#services">
                Leistungen            </a>
        </li>
        <li>
            <a href="#references">
                Referenzen            </a>
        </li>
        <li>
            <a href="#reel">
                Reel            </a>
        </li>
        <li>
            <a href="/de/kontakt" class="external">
                Kontakt            </a>
        </li>
        <li>
            <a href="/de/kundenbereich" class="external">
                Anmelden            </a>
        </li>
    </ul>
</nav>


    <header id="welcome" role="banner">
        <div class="container">
            <h1>Hallo,</h1>
        </div>
    </header><!-- /#welcome -->

    <main role="main">
        <section id="about">
            <div class="container">
                <h2>Über mich</h2>
            </div>
        </section><!-- /#about -->

        <section id="services">
            <div class="container">
                <h2>Leistungen</h2>
            </div>
        </section><!-- /#services -->

        <section id="references">
            <div class="container">
                <h2>Referenzen</h2>
            </div>
        </section><!-- /#references -->

        <section id="reel">
            <div class="container">
                <h2>Reel</h2>
            </div>
        </section><!-- /#reel -->
    </main>
    <footer role="contentinfo">
        <div class="container">
            <p>
                Test
            </p>
        </div>
    </footer>

</body>


</body>
</html>

Warum gibt er denn hier nicht die Volle Höhe aus :-(
 
Hallo,

das Problem ist nicht das main-Element als solches. Mit jeder anderen Containerbezeichnung hättest du das gleiche Problem.

Du willst schlicht etwas erzwingen, das so nicht in HTML / CSS vorgesehen ist.

Du hast ein Verständnisproblem:

Nämlich worauf sich die 100%-height beziehen.

Die beziehen sich in der Regel auf das umschließende Element, können dies aber nicht vergrößern.

Wenn du also 7 Elemente hast (header, 5 x section, footer) beziehen sich die 100%-height jeweils auf den body-Bereich.

Wenn sich die 5 x section innerhalb eines weiteren Containers befinden, der selbst auf 100%-height festgelegt ist, können sie durch height-Angaben nicht größer werden als dieser Container. Innerhalb eines Containers von 100%-height erreichen die 5 x section also jeweils nur 20% height, auch wenn du jeweils 100% angibst.

In diesem Fall müssste der umschließende Container also über 500%-height verfügen. Aber ob dabei jeder Browser mitspielt?

Noch komplizierter wird es natürlich, wenn die Container wiederum Inhalt haben, der dann entweder die vorgegebenen 100%-height sprengt oder auch nicht.

Auf die Problem mit den Fenstergrößen der unterschiedlichen Geräte habe ich ja bereits hingewiesen.

Meiner Ansicht nach führen dich deine Vorstellungen in eine Sackgasse.

Gruss

MrMurphy
 
Klasse - danke Dir. Also wenn ich Sektionen ohne umschließendes Main mache, dann kann ich die ja sauber auf 100% Höhe bringen - wie das ja auch beim Footer und Header klappt. Ich wollte das <main> darum wrappen, um die ganze Attribute zu vergeben und das sauber auszuzeichnen. Wenn ich Dich also richtig verstehe, dann habe ich zwei Möglichkeiten ... Entweder ich verzichte auf das Main und kann so meine Sections auf 100% Höhe bringen oder ich wrappe mit <main> und habe somit korrekt ausgezeichnet - versuche dann die Inhalte über Queries und CSS so anzupassen, das es auf meine Bedürfnisse passt. Aber was ich nicht verstehe ist, das ja html und body auch um die Sections liegt ... Wenn ich das ja wie folgt auszeichne:

HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sections 100% height</title>
<style>

html {
  height: 100%;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
}

body {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}

header
{
  height: 100%;
  width: 100%;
}

main {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
}

section {
  height: 100%;
  min-height: 100%;
}

/**
 * @section general classes
 */

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

/**
 * @section backgrounds
 */
#welcome     { background: #eee;}
#about         { background: #aaa;}
#services     { background: #666;}
#references { background: #eee;}
#reel         { background: #bbb;}


</style>
</head>

<body>
<nav>
    <ul>
        <li>
            <a href="#welcome">
                Über mich            </a>
        </li>
        <li>
            <a href="#about">
                Über mich            </a>
        </li>
        <li>
            <a href="#services">
                Leistungen            </a>
        </li>
        <li>
            <a href="#references">
                Referenzen            </a>
        </li>
        <li>
            <a href="#reel">
                Reel            </a>
        </li>
        <li>
            <a href="/de/kontakt" class="external">
                Kontakt            </a>
        </li>
        <li>
            <a href="/de/kundenbereich" class="external">
                Anmelden            </a>
        </li>
    </ul>
</nav>


    <header id="welcome" role="banner">
        <div class="container">
            <h1>Hallo,</h1>
        </div>
    </header><!-- /#welcome -->

    <main role="main">
        <section id="about">
            <div class="container">
                <h2>Über mich</h2>
            </div>
        </section><!-- /#about -->

        <section id="services">
            <div class="container">
                <h2>Leistungen</h2>
            </div>
        </section><!-- /#services -->

        <section id="references">
            <div class="container">
                <h2>Referenzen</h2>
            </div>
        </section><!-- /#references -->

        <section id="reel">
            <div class="container">
                <h2>Reel</h2>
            </div>
        </section><!-- /#reel -->
    </main>
    <footer role="contentinfo">
        <div class="container">
            <p>
                Test
            </p>
        </div>
    </footer>

</body>


</body>
</html>

funktioniert es ... Nur das meine Footer wieder nach oben rutscht. Genau das Problem was ich anfangs hatte und genau dieses Verhalten verstehe ich nicht. Das ruft das min-height hervor :-(
 
Ob deine gesamten Seiten zum Hauptteil gehören, möchte ich bezweifeln und wenn die sctions in keinem Zusammenhang zueinander stehen, solltest du auf diese verzichten, oder mit div kappseln..
Code: 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hallo</title>
<style>

* {
margin:0;
padding:0;
}

body,
html
{
  height: 100%;
  width: 100%;
}
body {
  overflow-y: scroll;
}
header {
  min-height: 100%;
  background:#aaa;
  border-bottom:1px solid #000;
}
div {
min-height: 100%;
background:#ada;
border-bottom:1px solid #000;
}
footer {
  min-height: 100%;
  background:#dad;
  border-bottom:1px solid #000;
}
nav {
height:100px;
}

li {
display:inline-block;
list-style:none;
}
</style>
</head>
<body class="">
<nav>
  <ul>
  <li><a href="#welcome">Home</a></li>
  <li><a href="#about">Über mich</a></li>
  <li><a href="#services">Leistungen</a></li>
  <li><a href="#references">Referenzen</a></li>
  <li><a href="#reel">Reel</a></li>
  <li><a href="/de/kontakt" class="external">Kontakt</a></li>
  <li><a href="/de/kundenbereich" class="external">Anmelden</a></li>
  </ul>
</nav>

<header id="welcome" role="banner">
  <h1>Hallo,</h1>
</header><!-- /#welcome -->
  <div id="about">
  <h2>Über mich</h2>
  </div><!-- /#about -->
  <div id="services">
  <h2>Leistungen</h2>

  </div><!-- /#services -->
  <div id="references">
  <h2>Referenzen</h2>
  </div><!-- /#references -->
  <div id="reel">
  <h2>Reel</h2>
  </div><!-- /#reel -->

<footer role="contentinfo">
 
  <p>
  Test
  </p>
</footer>

</body>
</html>
[code]
 
Hallo,

ist schon lustig: Du kämpfst fröhlich (und unnötig) gegen das normale Verhalten von HTML / CSS an und wundest dich über Probleme.

Durch eine CSS-Angaben bringst du die Browser in Konflikte.

Container (also auch in deinem Fall der main-Container) sind dafür ausgelegt mit dem Inhalt zu wachsen. Das "kennen" auch die umgebenden Container und passen sich flexibel an.

Du zwingst den main-container jedoch einerseites per CSS zu 100%-height, andererseits zwingst du durch das gewichtigere min-height der inneren Container auch per CSS (also nicht durch den Inhalt) den main-Container auf über 100%-Höhe zu wachsen.

Die selben Informationen werden dem dem main-Container nachfolgenden Container (hier footer) übermittelt: Einerseits bekommt der die Info: main = 100% Höhe, anderereseits (und damit widersprüchlich) sind die sich im main-Container befindlichen Container per CSS (also nicht durch den Inhalt) höher also die 100% des main-Containers. Damit kann der footer nichts anfangen und richtet sich eher nach der vorgegebenen 100%-Höhe des main-Containers und nicht nach dessen enthaltenen Containern.

Alles stark vereinfacht.

Kurz: Höhe durch Inhalt verhält sich also anders als Höhe durch CSS.

Meine Vorhersage: Wenn du die Container später mit Inhalt füllst wird dir dein Konstrukt um die Ohren fliegen. Erstelle also erst den Inhalt und errichte dann danach dein Layout. So ist es vorgesehen und bewährt. Deine Vorgehensweise entstammt dem letzten Jahrtausend und hat sich bereits tausendfach als Sackgasse erwiesen. Aber wenn du unnötig laufen willst ...

Gruss

MrMurphy
 
Super - danke Dir. habe mir das jetzt mal überlegt und werde nun nur den Kopfbereich auf 100% Höheausrichten, als opener quasi, <main> und dessen Inhalt werde ich ganz "normal wachsen" lassen. Footer werde ich dann entsprechend anpassen.

Danke für eure Geduld und Mühe
Beste Grüße
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben