zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden height 100%

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.04.2013, 22:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.09.2007
Beiträge: 46
kostonstyle befindet sich auf einem aufstrebenden Ast
Standard height 100%

Hallo miteinander
kann jemand mir bitte helfen, warum hier in der klasse signin height:100% nicht funktioniert?
HTML-Code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8" />
<title>960 Grid System &mdash; Demo</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960_24_col.css" />
<style>
    .logo_bar {
        width: 100%;
        height: 50px;
        position: relative;
        background-color: #000000;
        top: 0;
    }

    .signin {
        background-color: #FFFFFF;
        top: 0;
        height: 100%;
    }


</style>
</head>
<body>
<div class="logo_bar">
    <div class="container_24">

        <div class="grid_6 push_17">
            <div class="grid_3 alpha signin">
                Sign In
            </div>

            <div class="grid_3 omega signin">
                Sign Up
            </div>
        </div>

        <div class="grid_6 pull_4">
            <p>
                logo
            </p>
        </div>


    </div>
</div>
</body>
</html>
wenn ich height: 40px eingebe dann funktioniert, aber prozentual funnktioniert einfach nicht..

Geändert von kostonstyle (08.04.2013 um 22:34 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.04.2013, 22:56
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Weil 40 Pixel eine absolute Angabe ist, die jeder versteht.
100% von 40px ist auch klar. Aber wenn nichts vorher fest steht, dann weiss auch der Browser nicht was 100% sein sollen, darum:

Schreib in dein CSS:
HTML-Code:
html, body {
height: 100%;
} 
dann sind body 100% von Html und als Root-Element holt sich HTML die Grösse vom Viewport.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.04.2013, 08:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.09.2007
Beiträge: 46
kostonstyle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Aber wenn nichts vorher fest steht, dann weiss auch der Browser nicht was 100% sein sollen, darum:
erstmal vielen dank für deine antwort, aber irgendwie checke ich einfach nicht, warum muss man den in body height 100% angeben?
Mit Zitat antworten
  #4 (permalink)  
Alt 09.04.2013, 09:43
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Zitat:
Zitat von kostonstyle Beitrag anzeigen
warum muss man den in body height 100% angeben?
Das musst du in deinem Fall nicht.

signin wird nicht auf die Höhe von logo_bar gezogen, da noch 2 weitere Divs ohne Höhenangabe dazwischen liegen. Den 100% für signin fehlt also eine Bezugsgröße, daher findet es keine Anwendung.
Mit Zitat antworten
  #5 (permalink)  
Alt 09.04.2013, 10:47
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.09.2007
Beiträge: 46
kostonstyle befindet sich auf einem aufstrebenden Ast
Standard

was muss ich jetzt machen?
Mit Zitat antworten
  #6 (permalink)  
Alt 09.04.2013, 11:35
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Für height (sowie min-height) in % braucht das Elternelement eine height-Deklaration ungleich auto als Bezugswert (bei width ist das übrigens anders).

Also muss das Elternelement von .signin height bekommen. Sollen das auch % sein, muss auch dessen Elternelement height bekommen usw.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 09.04.2013, 12:46
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.09.2007
Beiträge: 46
kostonstyle befindet sich auf einem aufstrebenden Ast
Standard

.logo_bar hat ja height von 50px und ist elternelement von .signin. Aber warum funktioniert height 100% nicht bei .signin.
HTML-Code:
   .logo_bar {
        width: 100%;
        height: 50px;
        position: relative;
        background-color: #000000;
        top: 0;
    }

    .signin {
        background-color: #FFFFFF;
        top: 0;
        height: 100%;
    }
der elternelement ist ja definiert wie hoch(50px) es nicht, und in der childelement wurde height als %tal mitgegeben, so warum funktioniert height 100% bei .signin nicht. height 100% bezieht ja auf .logo_bar(50px).
Mit Zitat antworten
  #8 (permalink)  
Alt 09.04.2013, 12:52
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von kostonstyle Beitrag anzeigen
.logo_bar hat ja height von 50px und ist elternelement von .signin.
Nein, es ist nur ein Vorfahre.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #9 (permalink)  
Alt 09.04.2013, 12:54
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von kostonstyle Beitrag anzeigen
.logo_bar hat ja height von 50px und ist elternelement von .signin.
falsch, .logo_bar ist nicht das Elternelement! Schau dir dein html nochmal genau an.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.04.2013, 14:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.09.2007
Beiträge: 46
kostonstyle befindet sich auf einem aufstrebenden Ast
Standard

aha ok das stimmt. dann muss ich also bei container_24 height 100% setzen?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS von Plugin beisst! expand CSS 0 28.09.2012 18:44
Hintergrundbild repeat-y beginnend ab bestimmter höhe nightmind CSS 16 14.07.2012 13:37
Div Positionen in Firefox falsch ozero CSS 4 17.07.2009 23:35
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 15:07
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 16:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:45 Uhr.