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

Wie setzt man % bei height richtig ein?

marcelgerard

marcelgerard

Mitglied
Hi Leute,

ich hab mal eine Frage zu dem Thema "height". Ich werde nicht ganz schlau daraus, wie man height: 100%; richtig einsetzt. Wenn ich einem Container eine Höhe geben möchte und 100% nehme, kommt keine Reaktion. Nur auf Pixel reagiert er wirklich. Gibt es bei % einen zusätzlichen Trick damit er darauf reagiert? Bei width zieht er auch über die gewünschte Fläche ohne Probleme.

LG Marcel
 
Werbung:
Hallo

Grundsätzlich sollten height-Angaben, mit welcher Einheit auch immer, unterbleiben. Das ist in der Regel unnötig und zählt zurecht als schlechter Stil. Zudem erzeugen grade Neulige mit height-Angaben Probleme, die eigentlich überhaupt nicht vorhanden sind.

Bei height-Angaben beziehen sich Prozent-Angaben immer auf den übergeordneten Container. Damit vergrößern sie diesen aber nicht.

Wenn du mit height als Grundlage das jeweilige Browser-Fenster nehmen willst kannst du die Einheit vh verwenden. Damit werden dann auch übergeordnete Container vergrößert, sofern ihnen kein kleinerer Wert zugewiesen wurde.

Gruss

MrMurphy
 
Hab ich mir schon fast gedacht. Ich hab nur ein kleines Problem, das ich mit der Höhe handhaben will, aber nicht weiß, wie ich das machen soll.

Ich hab drei div Container untereinander, der mittlere hat die CSS Anweisung position: relative; bekommen, weil darin ein weiterer Container ist, dem ich positon: absolute; geben muss, damit ich eine Art Tab-Navigation bauen kann.

Jetzt ist es ja eigentlich so, dass der mittlere Container zwar aus der Reihe gehoben wurde, der untere aber nicht nachrückt. So habe ich relative jedenfalls verstanden. Passiert aber nicht. Der untere Container rückt trotzdem nach oben und überlappert sich mit dem Inhalt des mittleren Containers. Ich verstehe nicht ganz wieso. Da dachte Ich,vielleicht weil keiner der eine Höhenangabe habe, sondern nur so groß wie der Inhalt ist.

LG Marcel
 
Werbung:
Hallo

Aus deinen Angaben sehe ich keinen Grund für position-Angaben. Ohne deinen Quelltext zu kennen kann ich dir aber leider keine konkrete Lösung mit aktuellem HTML / CSS anbieten.

Gruss

MrMurphy
 
HTML: 
<main class="article-side">
    <div>test</div>
      

          <article class="infobox">
    <section id="allgemeines">
        <h2><a href="#allgemeines">Allgemeines</a></h2>
        <p>Hier stehen ganz allgemeine Informationen.</p>
    </section>
    <section id="funktionen">
        <h2><a href="#funktionen">Funktionen</a></h2>
        <p>Hier stehen Informationen zu den Funktionen</p>
    </section>
    <section id="preise">
        <h2><a href="#preise">Preise</a></h2>
        <p>Hier stehen Informationen zu den Preisen.</p>
    </section>
</article>
      
        <div>test2</div>

    </main>

Code: 
.article-side {
    background-color: #fff;
    background-repeat: repeat-x;
    float: left;
    width: 85%;
}

.infobox {
    position: relative;
}

article.infobox section {
    position: absolute;
    display: block;
    width: 400px;
    height: 200px;
    top: 0;
    background-color: #c5d2de;
}

article.infobox section h2 {
    position: absolute;
    left: 0;
    top: -30px;
    width: 124px;
    height: 29px;
    font-family: Verdana;
    font-size: 15px;
    margin: 0;
    background-color: #194b7d;
    border-radius: 15px 15px 0 0;
    border: solid #ffffff;
    border-width: 1px 1px 0 0;
    z-index: 1;
}

article.infobox section:nth-child(2) h2 {
    left: 120px;
    z-index: 0;
}

article.infobox section:nth-child(3) h2 {
    left: 240px;
    z-index: -1;
}

article.infobox section h2 a {
    display: block;
    margin: 5px 0 0 0;
    text-align: center;
    text-decoration: none;
    color: #c5d2de;
}

article.infobox section:target, article.infobox section:target h2 {
    color: #000000;
    background-color: #c5d2de;
    z-index: 1;
}

article.infobox section:target h2 a {
    color: #194b7d;
}

Was ich jetzt eigentlich will, dass das diese Tab-Funktion aufgebaut als mittlerer Container in diesem Elternelement auch in dem mittleren bleibt und der untere nicht nach oben rutscht. Ich hatte gedacht das sich der Container trotz der Angabe position: absolute nur in dem darüber liegenden Element bewegt.
 
Werbung:
Probier mal
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tab mit :focus</title>
<style>

* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
 box-sizing:border-box;
}

.infobox {
 display:flex;
 position:relative;
 width:50%;
 min-height:350px;
}

.infobox ul {
 position:absolute;
 left:0;
 right:0;
 padding:20px;
 height:300px;
 overflow:auto;
 background:#eee;
}


.infobox a {
 display:block;
 padding:10px;
 margin-right:2px;
 background:#09c;
 color:#fff;
 position:relative;
}

.infobox a:focus {
 background:#eee;
 color:#000;
}

.infobox a:focus ~ ul {
 z-index:99;
}

p {
padding:30px 10px;
}

</style>
</head>
<body>
<h2>Inhalt</h2>

<ul class="infobox">
<li><a id="start" href="#">Allgemeines</a>
 <ul>
    <li><p>Hier stehen ganz allgemeine Informationen.</p>
<p>Hier stehen ganz allgemeine Informationen.</p>
<p>Hier stehen ganz allgemeine Informationen.</p>
<p>Hier stehen ganz allgemeine Informationen.</p>
<p>Hier stehen ganz allgemeine Informationen.</p>
<p>Hier stehen ganz allgemeine Informationen.</p>
</li>
 </ul>
</li>

<li><a href="#">Funktionen</a>
  <ul>
    <li><p>Hier stehen Informationen zu den Funktionen</p></li>
  </ul>
</li>

<li><a href="#">Preise</a>
  <ul>
     <li><p>Hier stehen Informationen zu den Preisen.</p></li>
  </ul>
</li>

<script>
 document.getElementById("start").focus();
</script>

</ul>
<h2>Inhalt</h2>
</body>
</html>
 
Zuletzt bearbeitet:
Hi @djheke - danke für deinen Code. Das funktioniert schon deutlich besser. Wie wäre den der Code, wenn man die Tabs links neben dem Inhalt haben möchte? Ich blicke da noch nicht ganz durch. Ich würde das gerne so wie hier haben:

bild1.png


Nicht genauso vom Design her aber die Art. Die Tabpunkte links und der Inhalt ändert sich rechts wenn man sie anklickt. Vielleicht kannst du mir dabei auch helfen? Ich gucke mir oft solche Code dann an und verstehe dann wie sie funktionieren. Deiner ist ja jetzt auch mit einer JavaScript Funktion, meiner war ohne, war aber viel komplizierter anscheinend.
 
Na ein zweiten Container einfügen.
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tab mit :focus</title>
<style>
* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
 box-sizing:border-box;
}
section {
 display:flex;
 width:90%;
 margin:auto;
 background:#ddd;
}

.infobox {
 display:flex;
 position:relative;
 width:100%;
 min-height:350px;
}
.infobox ul {
 position:absolute;
 left:0;
 right:0;
 padding:20px;
 height:300px;
 overflow:auto;
 background:#eee;
}
.infobox a {
 display:block;
 padding:10px;
 margin-right:2px;
 background:#09c;
 color:#fff;
 position:relative;
}
.infobox a:focus {
 background:#eee;
 color:#000;
}
.infobox a:focus ~ ul {
 z-index:99;
}

.info-nav {
 margin-right:30px;
 flex-basis:40%;
}

.info-nav a , .info-nav h2 {
 padding:10px;
 background:#e44;
 color:#fff;
 font-size:1rem;
}

.info-nav a {
 background:#eee;
 color:#000;
 display:block;
}

p {
padding:10px;
}
</style>
</head>
<body>

<section>
<ul class="info-nav">
<li><h2>Haupt Info</h2></li>
<li><a href="#">Release Information</a></li>
<li><a href="#">Atwork</a></li>
</ul>

<ul class="infobox">
<li><a id="start" href="#">Allgemeines</a>
 <ul>
    <li><p>Hier stehen ganz allgemeine Informationen.</p>
</li>
 </ul>
</li>
<li><a href="#">Funktionen</a>
  <ul>
    <li><p>Hier stehen Informationen zu den Funktionen</p></li>
  </ul>
</li>
<li><a href="#">Preise</a>
  <ul>
     <li><p>Hier stehen Informationen zu den Preisen.</p></li>
  </ul>
</li>
<script>
 document.getElementById("start").focus();
</script>
</ul>
</section>
</body>
</html>
 
Werbung:
Hmm, der Code funktioniert jetzt aber nicht so. Die Tabs links funktionieren nicht und die anderen Tabs sind immer noch da? Hab jetzt deinen Code einfach zum Test kopiert. Muss ich da noch was noch ändern?
 
Da dieses Thema mein nächstes Problem ähnlich behandelt hier eine allgemeine Frage. Kann man irgendwie die Höhe eines Hintergrunds beeinflussen ohne Höhenangabe? Ich hab einen Elternelement, welches die Background "weiß" hat. darin sind zwei drei Kindselemente. Durch den Inhalt zieht der Hintergrund natürlich mit, doch ich will jetzt, dass der Hintergrund auch ohne weiterer Kindselemente den Rest mit Hintergrund bedeckt. Eine Höhenangabe mit Pixel ist nicht möglich, da es sich dann nicht für alle Bildschirm Größen automatisch anpasst. Was kann man da tun?

LG Marcel
 
Hallo

Was kann man da tun?
Zum Vergrößern anklicken....

Eine eindeutige Lösung gibt es nicht. Das hängt von den Seiten ab, die wir nicht kennen. Hast du mal zwei Beispiele, also mit und ohne gefülltem Container?

Was du erreichen willst ist in HTML / CSS nicht vorgesehen. HTML / CSS dienen in erster Linie der Informationsübermittelung und nicht der Gestaltung.

Deshalb wirst du tricksen müssen.

Ich erkenne auch nicht warum das überhaupt notwendig sein soll. Die Besucher müssen als Nachteil unnötig scrollen um die Leerfläche zu überwinden. Aber welchen Vorteil haben sie dadurch?

Gruss

MrMurphy
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben