YouSee: Höhe einer Section an Inhalt anpassen

SELF-Forum

Höhe einer Section an Inhalt anpassen

YouSee
– Informationen zu den Bewertungsregeln

Hallo liebes Forum,

ich beschäftige mich momentan seit Jahren mal wieder mit HTML und CSS und bin relativ überrascht, wie viel mittlerweile mit relativ wenig Aufwand möglich ist.

Nun stehe ich aber vor einem Problem, zu dem ich zwar andere Einträge in Foren finde, die mir aber nicht weitergeholfen haben.

Die Idee ist, eine Seite zu bauen, die aus mehreren Sections besteht, die ihrerseits jeweils mindestens 100vh, also mindestens über den gesamten sichtbaren Bereich gehen. So weit so gut. Wenn ich beispielsweise die erste Section aber mit Inhalt fülle, möchte ich, dass sich die Höhe der Section nach der Höhe des Inhalts richtet. Wenn also der Inhalt höher als 100vh ist, soll die Section wachsen. Das will leider nicht funktionieren.

Ich weiß, dass die Sections eigentlich nicht zur Seitenstrukturierung gedacht sind, daher habe ich den gleich Aufbau auch schon mit Divs versucht, komme aber zum selben Ergebnis.

Ich habe schon nach Floats Ausschau gehalten und testweise alle gelöscht. Ohne Besserung. Min-Height funktioniert auch nicht.

Hier die relevanten Stellen im CSS-Code:

  
section {  
	min-height:100vh;  
}  
  
#screen1 {	  
	background: #ededed;  
}  
  
#screen2 {  
	background: #4576db;  
}  
  
#screen3 {  
	background: #e1793d;  
}  
  
article.info {  
	position:absolute;  
	text-align:center;  
	width:300px;  
	height:auto;  
	margin-top:2%;  
	margin-left:270px;  
	padding:2em;  
	margin-right:10%;  
	color:#797a7c;  
	font-size:14px;  
	background:#FFFFFF;  
	font-family: 'Open Sans', sans-serif;  
	border-radius:18px;  
}  
  
article.info2 {  
	position:absolute;  
	text-align:center;  
	width:300px;  
	height:auto;  
	margin-top:2%;  
	margin-left:650px;  
	padding:2em;  
	margin-right:10%;  
	color:#797a7c;  
	font-size:14px;  
	background:#FFFFFF;  
	font-family: 'Open Sans', sans-serif;  
	border-radius:18px;  
}

Und hier die relevanten Stelle im HTML-Code:

  
<body>  
    <section id="screen1">  
        <article class="info">  
             <h1>Was macht das Atelier Klangforschung?</h1>  
  
            <br />  
            <img src="bilder/laptopklein.jpg" alt="info">  
            <br />  
            <br />Das Atelier Klangforschung etabliert für den Bereich Musik der Gegenwart Projektlehre. In thematisch abgezirkelten Projektschienen ergänzen sich große und kleine Forschungsprojekte, Semesterarbeiten, Examensarbeiten mit synergetischen Effekten. Die bisherigen Forschungslinien sollen hier zusammenfassend vorgestellt werden.</article>  
        <article class="info2">  
             <h1>Was sind aktuelle Projekte?</h1>  
  
            <br />  
            <img src="bilder/laptopklein.jpg" alt="info">  
            <br />  
            <br />Das Atelier Klangforschung etabliert für den Bereich Musik der Gegenwart Projektlehre. In thematisch abgezirkelten Projektschienen ergänzen sich große und kleine Forschungsprojekte, Semesterarbeiten, Examensarbeiten mit synergetischen Effekten. Die bisherigen Forschungslinien sollen hier zusammenfassend vorgestellt werden.</article>  
    </section>  
    <section id="screen2">  
        <div class="themen">  
             <h1>Musik und Medien: Theorien - Konzepte - Begriffe</h1><h1>Thema2</h1>  
  
        </div>  
    </section>  
    <section id="screen3"></section>  
</body>

Ich hoffe, mir kann jemand weiterhelfen.
Vielen Dank schon im Voraus!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Höhe einer Section an Inhalt anpassen

    Quincunx
    – Informationen zu den Bewertungsregeln

    Hallo YouSee,

    schon aus Neugier, da mir die vh Einheit bisher fremd war, habe ich ein wenig experimentiert und deinen Code etwas abgeändert.

    main {  
  text-align: center;  
}  
section {  
  min-height: 100vh;  
}  
  
#screen1 {  
  background-color: #ededed;  
}  
  
#screen2 {  
  background-color: #4576db;  
}  
  
#screen3 {  
  background-color: #e1793d;  
}  
  
article {  
  display: inline-block;  
  vertical-align: top;  
  width: 300px;  
  margin: 1em;  
  padding: 1em;  
  color: #797a7c;  
  font-size: 14px;  
  background-color: #FFFFFF;  
  font-family: sans-serif;  
  border-radius: 18px;  
}

    <main>  
  
  <section id="screen1">  
    <article>  
      <header>  
        <h1>Was macht das Atelier Klangforschung?</h1>  
      </header>  
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
    </article>  
  
    <article>  
      <header>  
        <h1>Was sind aktuelle Projekte?</h1>  
      </header>  
      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
    </article>  
  </section>  
  
  <section id="screen2">  
    <article>  
      <header>  
        <h1>Musik und Medien: Theorien - Konzepte - Begriffe</h1>  
        <h2>Thema2</h2>  
      </header>  
    </article>  
  </section>  
  
  <section id="screen3"></section>  
  
</main>

    position: absolute habe ich durch display: inline-block ersetzt und mittels <main> die Zentrierung erstellt.

    gruss qx

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Höhe einer Section an Inhalt anpassen

      YouSee
      – Informationen zu den Bewertungsregeln

      Hallo YouSee,

      schon aus Neugier, da mir die vh Einheit bisher fremd war, habe ich ein wenig experimentiert und deinen Code etwas abgeändert.

      position: absolute habe ich durch display: inline-block ersetzt und mittels <main> die Zentrierung erstellt.

      gruss qx

      Hallo Quincunx,

      besten Dank für die schnelle Reaktion und für das Aufräumen im Code! Das funktioniert hervorragend. Durch display: inline-block habe ich einiges gewonnen. Danke Dir.

      Beste Grüße.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. weitere Lösung für ein archiviertes Problem, @Gunnar Bittersmann

      Matthias Apsel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Om nah hoo pez nyeetz, Quincunx!

      schon aus Neugier, da mir die vh Einheit bisher fremd war, habe ich ein wenig experimentiert und deinen Code etwas abgeändert.

      Ich hab die Einheit vh damals zwar ins Wiki geschrieben, allerdings auch gleich wieder vergessen.

      vh und vw bieten allerdings eine elegante Lösung für quadratische Boxen, die im Juni gesucht war.

      http://forum.de.selfhtml.org/archiv/2014/6/t217741/

      Kein zugegebenermaßen einfallsreiches Getrickse mit absolut positionierten Pseudoelementen mehr nötig, Browserunterstützung top und da das Element selbst in seiner Größe beschränkt wird und nicht nur ein Bild eines Quadrates druntergelegt wird, lässt sich auch einfach mit (text-)overflow auf übergroße Inhalte reagieren.

      Also in Anlehnung an das dabblet: Quadratischer, praktischer, besser

      div  
{  
	display: inline-block;  
	margin: 1em;  
	width: 30vh;  
	height: 30vh;  
	font: 24px Georgia, serif;  
        overflow: /* was gewünscht wird */  
}

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Saum und Saumagen.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln