Div 100% height

Gehe zu Seite:

Geschlossen

Sa. 15.11.2008 20:34 Uhr #1

Son!c Hall Of Fame

Registriert seit
14.09.2006

Beiträge
3.766

Beitragswertungen

Heyho,

wie der titel des themas schon verrät hab ich ein problem mit CSS.
und zwar bekomm ich es nicht hin, dass sich der content meines designs bis zum browserrand verlängert.

wenn ich in die klasse height: 100%; reinschreib, wirds zu lang - sprich is muss weit runter scrollen. ich hab dann mal herr google gefragt und der meint das ich bei body und bei html auch height: 100%; reinschreiben soll - hat aber nicht funktionert

habt ihr ne lösung?

btw. das design besteht NUR aus Divs

gruß
sonic

Nimm das Leben nicht zu ernst, du kommst sowieso nicht lebend raus.
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 15.11.2008 20:52 Uhr #2

BasD Mitglied

Registriert seit
28.03.2008

Beiträge
16

Beitragswertungen

Hi,
ich glaub mal gelesen zu haben, dass man mit Javascript die Höhe des Browserfensters auslesen kann. Bin mir aber nicht ganz sicher.
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 15.11.2008 20:55 Uhr #3

Hassmann Mitglied

Registriert seit
13.02.2008

Beiträge
1.591

Beitragswertungen

jap.. document.write(screen.height); soviel ich weis

Sub2Go.NET | Kostenlosen Webspace mit vielen features! Für Ilch-Forumsmitglieder doppelten Speicher!
Mave1993.de Blog
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 15.11.2008 20:57 Uhr #4

Son!c Hall Of Fame

Registriert seit
14.09.2006

Beiträge
3.766

Beitragswertungen

und als code?

?
1
2
3
4
5
<script type="text/javascript" language="JavaScript">

</script>

oder was?!

Nimm das Leben nicht zu ernst, du kommst sowieso nicht lebend raus.
0 Mitglieder finden den Beitrag gut.
- zitieren

Sa. 15.11.2008 21:18 Uhr #5

BasD Mitglied

<html><head>
<title>Fensterhöhe</title>
<script type="text/javascript">
function wheight () {
  if (window.innerHeight) {
    return window.innerHeight;
  } else if (document.body && document.body.offsetHeight) {
    return document.body.offsetHeight;
  } else {
    return 0;
  }
}
</script>
</head>
<body>
<script type="text/javascript">
if (document.body && document.body.offsetWidth) {
  height = wheight();
}
document.write(" Höhe: " + height);
</script>
 
</body></html>

0 Mitglieder finden den Beitrag gut.

zitieren

Sa. 15.11.2008 21:22 Uhr #6

Son!c Hall Of Fame

Registriert seit
14.09.2006

Beiträge
3.766

Beitragswertungen

und was soll mir das bringen? o_O

mehr als die browser höhe wird mir da nich ausgegebn ... ich glaub du hast mich falsch verstanden

Nimm das Leben nicht zu ernst, du kommst sowieso nicht lebend raus.
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 15.11.2008 21:36 Uhr #7

vollstr3cker Mitglied

Registriert seit
12.02.2007

Beiträge
1.399

Beitragswertungen

ich hatt mal vor längerer zeit das gleiche problem. ich glaube ich habs dann bei html und body height 100% angegeben und bei dem div bei dem du die höhe haben wills mit min-height 100%.

bin mir jetzt aber nicht sicher ob das genau so stimmt, ich kann aber nochmal nachschauen.

####################
## hier geht's zu apex designs,
# meinem digitalen Portfolio
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 15.11.2008 21:39 Uhr #8

BasD Mitglied

Registriert seit
28.03.2008

Beiträge
16

Beitragswertungen

Zitat geschrieben von Sonc

und was soll mir das bringen? o_O

mehr als die browser höhe wird mir da nich ausgegebn ... ich glaub du hast mich falsch verstanden

Du willst doch, dass der Content bis zum unteren Seitenrand gezogen wird, obwohl der Inhalt ihn nicht soweit ausfüllt!?

Wenn ja, dann musst du nur den ausgegeben Wert des Javascript Codes, sprich die Höhe, ins <div> als min-height Attribut einsetzen. Habs grad bei mir getestet, klappt eigentlich.

Entweder ich habs immer noch nicht gechecked oder die Funktion gibt das komplette Browserfenster inkl. Titelleiste etc. aus.
0 Mitglieder finden den Beitrag gut.
- zitieren

Sa. 15.11.2008 22:15 Uhr #9

Son!c Hall Of Fame

@BasD:
aber jeder hat ja nicht die aufößung und die größe die ich hab. also würde es ja bei ner größeren auflößung trotzdem weiter unten nicht abschließen...

@vollstr3cker:
min-height geht bei mir nicht . da tut sich überhaupt nix ^^

ich kann euch ja mal den code reinschreiben

index.php

<div id="content"> 
 <div class="text"> 
        <?php if(!file_exists('content/'.$open.'.php')) {$open = "notfound";} $inhalt = include("content/". $open .".php"); ?>  
 </div>
</div>

layout.css

html { height: 100%; }
body { 
    background: #F6F3F5 url(../images/background.jpg); 
    background-repeat: repeat-x; 
    margin: 0 0 0 0;
    text-align: left;
    height: 100%;
    padding: 0 0 0 0;
}
#content {
    background: url(../images/content.png);
    background-repeat: repeat-y;
    width: 770px;
    font: 12px Trebuchet MS;
    color: #404040;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
#content .text {
    text-align: left;
    padding: 0px 45px 10px 46px;
}

Zuletzt modifiziert von Son!c am 15.11.2008 - 22:36:42

Nimm das Leben nicht zu ernst, du kommst sowieso nicht lebend raus.

0 Mitglieder finden den Beitrag gut.

zitieren

So. 16.11.2008 00:04 Uhr #10

BasD Mitglied

Registriert seit
28.03.2008

Beiträge
16

Beitragswertungen

Zitat geschrieben von Son!c

@BasD:
aber jeder hat ja nicht die aufößung und die größe die ich hab. also würde es ja bei ner größeren auflößung trotzdem weiter unten nicht abschließen...

Hmm, ich dachte eigentlich, dass der Javascript Code die Höhe aus der Auflösung bei jedem Laden neu berechnet.. Ist das nicht so? Naja, dann wieder was dazu gelernt

Also, wenn ich meine Auflösung umstelle funktioniert es einwandfrei.

Zuletzt modifiziert von BasD am 16.11.2008 - 00:20:10
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 16.11.2008 10:22 Uhr #11

vollstr3cker Mitglied

Registriert seit
12.02.2007

Beiträge
1.399

Beitragswertungen

so gings. wusste es nicht mehr genau auswendig.

ich würde für so eine kleinigkeit kein javascript benutzen wenns noch dazu ohne geht^^

####################
## hier geht's zu apex designs,
# meinem digitalen Portfolio
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 16.11.2008 13:33 Uhr #12

Son!c Hall Of Fame

Registriert seit
14.09.2006

Beiträge
3.766

Beitragswertungen

also irgendwie geht das nich ^^

Nimm das Leben nicht zu ernst, du kommst sowieso nicht lebend raus.
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 16.11.2008 19:43 Uhr #13

BasD Mitglied

Registriert seit
28.03.2008

Beiträge
16

Beitragswertungen

Zitat geschrieben von Sonc

also irgendwie geht das nich ^^

Poste mal deine Index.htm vom Design, vielleicht kann ich dir dann besser helfen, den Javascript Code richtig einzubauen, obwohl er nicht die beste Lösung ist.
0 Mitglieder finden den Beitrag gut.
- zitieren

So. 16.11.2008 20:14 Uhr #14

Son!c Hall Of Fame

<div align="center">
    <div id="header">
     <div class="logo">&nbsp;</div>
     <div class="navi">
        <ul>
        <?php include("menu.php"); ?>
        </ul>
     </div>
    </div>
    <div id="content"> 
     <div class="text"> 
        <?php if(!file_exists('content/'.$open.'.php')) {$open = "notfound";} $inhalt = include("content/". $open .".php"); ?>  
     </div>
     </div>
     
  <div id="footer"> 
    <div class="copy"> 
      <div class="copyd">Copyright &copy; 2007-2008 <strong><font color="#9CAE62">SONIC</font><em>DESIGNS</em></strong>. 
        Alle Rechte vorbehalten.</div>
      <div class="copydr"><strong>Besucher:</strong> <?php echo $besucher_count; ?></div>
      <div class="copyg"><a href="index.php?open=startseite">Startseite</a> | 
        <a href="index.php?open=ueberuns">Über Uns</a> | <a href="index.php?open=leistungen">Leistungen</a> 
        | <a href="index.php?open=referenzen">Referenzen</a> | <a href="index.php?open=medien">Medien</a></div>
      <div class="copygr"><a href="#">XHTML</a> &amp; <a href="#">CSS</a> Valid</div>
      <div class="copyh">Diese Seite läuft mit dem <strong>ANJINCMS</strong>. 
        ANJINCMS ist ein Projekt von sonicdesigns.de</div>
      <div class="copyhr"><a href="index.php?open=kontakt">Kontakt</a> | <a href="index.php?open=agbs">AGBs</a> 
        | <a href="index.php?open=login">Login</a></div>
    </div>
  </div>
</div>
</body>
</html>

Nimm das Leben nicht zu ernst, du kommst sowieso nicht lebend raus.

0 Mitglieder finden den Beitrag gut.

zitieren

So. 16.11.2008 20:49 Uhr #15

BasD Mitglied

Registriert seit
28.03.2008

Beiträge
16

Beitragswertungen

Arg, jetzt seh ich das Problem, vielleicht ist es das was du meintest, dass wenn jetzt z.B. über dem Content sich noch was befindet, der Content trotzdem die gesamte Fensterhöhe nach unten geht. Also klappt's nicht

Naja, dann wird wohl nur die CSS Methode übrig bleiben.

Edit: Mal angenommen man subtrahiert die Höhe über dem Content mit dem Wert, den die Javascript Funktion ausgibt. Ob das in allen Fällen ginge?

Zuletzt modifiziert von BasD am 16.11.2008 - 20:52:04
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 16.11.2008 22:26 Uhr #16

Ithron Hall Of Fame

Registriert seit
21.01.2006

Beiträge
2.659

Beitragswertungen

Zitat geschrieben von BasD

Zitat geschrieben von Son!c

@BasD:
aber jeder hat ja nicht die aufößung und die größe die ich hab. also würde es ja bei ner größeren auflößung trotzdem weiter unten nicht abschließen...

Hmm, ich dachte eigentlich, dass der Javascript Code die Höhe aus der Auflösung bei jedem Laden neu berechnet.. Ist das nicht so? Naja, dann wieder was dazu gelernt

Also, wenn ich meine Auflösung umstelle funktioniert es einwandfrei.

Zuletzt modifiziert von BasD am 16.11.2008 - 00:20:10

so ein quatsch, natürlich wird das bei jedem seitenaufruf neu berechnet und nicht "irgendwo" gespeichert.

Zitat geschrieben von loW

Ja ich habs gesehen und wenn ichs kostenlos bekomm dann zahl ich doch nix dafür oder?
0 Mitglieder finden den Beitrag gut.
- zitieren
Mo. 17.11.2008 22:09 Uhr #17

Son!c Hall Of Fame

Registriert seit
14.09.2006

Beiträge
3.766

Beitragswertungen

fragt mich nicht wie, aber irgendwie gehts jetzt - aufjedenfall im firefox. der ie will noch nich ganz

mfg
sonic

Nimm das Leben nicht zu ernst, du kommst sowieso nicht lebend raus.
0 Mitglieder finden den Beitrag gut.
- zitieren

Beitrag zur Merkliste hinzufügen

ilch Forum » Allgemein » HTML, PHP, SQL,... » Div 100% height