[HTML / CSS] 100% Height mit Position:absolute
-
Hallo Zusammen
Folgendes Problem:
Ich habe ein DIV mit hilfe eines Position:absolute an eine bestimmte Stelle auf meiner Seite gesetzt. Jetzt wollte ich es so Konfigurieren das es immer bis zum Unteren Seitenrand geht. Wenn ich das mit "position:absolute; height:100%" mache, nimmt es jedoch die Gesamthöhe und deswegen bekomme ich dan einen Scrollbar(den ich nur ungern deaktivieren würde falls der Benutzer diesen braucht, falls sein Bildschirm zu klein ist). Wenn ich es mit "position:fixed" mache klappt das zwar, nur sobald ich anfange das Fenster zu vergrössern oder zu verschieben, verschiebt sich logischer weise das Fixed DIV.Frage: Ist es möglich ein DIV an einer bestimmten Stelle zu plazieren und zu sagen das es von dort auf bis ganz nach unten gehen soll, aber nicht weiter? Also ohne das man vorher über eine Programmierung(JavaScript oder so ev) die grösse abfragt.
mfg Ride
-
Die Sache mit Position absolute ist schonmal garnicht so schlecht.
Gehe ich richtig in der Annahme, dass dich stört dass wenn der Inhalt größer ist weiterhin unterhalb der Inhalt zu sehen ist?
Oder was meinst du bis nach ganz unten? Bis zum Ende des Dokumentes?
Nimm doch feste Inhaltsgrößen. Also divs wo du genau weist "So groß sind sie", am besten so, dass du bei einer Auflösung von 1024 / 786 alles verdeckst. - Dann verdeckst du es auch bei allen größeren Auflösungen komplett.
Wäre das einzige was mir auf Anhieb einfällt, wenn Javascript für dich nicht in Frage kommt.
-
Hier mal ein Screen vom ganzen.
Es geht, wie nur schwerlich zu übersehen ist um den Schwarz Gerahmten Teil.
Was ich will ist das es Teil immer bis ganz nach unten geht auch wenn der Benutzer keine Auflösung von 1024x768 hat sondern auch wenn diese 2000xIwas betragen sollte.
Und wenn ich jetzt hier "position:absolute; height:100%" dan geht das ganze einfach zu weit nach unten.
-
aehm .. grundstruktur vom html und css bitte. ^^
-
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head></head> <body class="main"> <div style="z-index:110; position:absolute; top:130px; left:0px; width:100%"> <?php include ("subpages/navigation.php"); ?> </div> <div style="z-index:103;"> <?php include ("subpages/bild.php"); ?> </div> <div style="z-index:102;"> <?php include ("subpages/aboutus/organisation_main.php"); ?> </div> </body> </html>organisation_main.php:
<html><head></head> <body> <div id="organisationpage2"> <table id="tablemainpage"> <tr> <td class="maintitle">Organisation</td> </tr> <tr> <td class="maintext">Die Zentrale bliblablubb </td> </tr> </table> </div> </body> </html>css dazu:
#organisationpage2 { position:fixed; left:270px; top:160px; height:100%; width:730px; background-color:#ffffff; } body.main { background-color:#beddee; width:100%; }Sollte alles notwendige beinhalten
-
Ride schrieb:
html:
organisation_main.php:
<html><head></head> <body> <div id="organisationpage2"> <table id="tablemainpage"> <tr> <td class="maintitle">Organisation</td> </tr> <tr> <td class="maintext">Die Zentrale bliblablubb </td> </tr> </table> </div> </body> </html>grad nur überflogen weil zeit fehlt aber .. machst du das wirklich so!?
-
naja n grosser Teil Text fehlt aber von der Struktur gesehen her ja.
Deswegeh weil der Text, der im DIV ist, das DIV nicht ganz ausfüllen soll und so weiter(grafikers idee nicht meine
)
-
3. Gebot im Webdevelopment:
Ihr sollet nicht missbrauchen Tabellen zum Zwecke der Gestaltung.
-
1. Gebot der allgemeinen Programmierung
Ihr solltet nicht blind, ausnahmslos und pauschal jedes 'Gebot' von jedem selbsternannten Guru befolgen.
-
Ride schrieb:
naja n grosser Teil Text fehlt aber von der Struktur gesehen her ja.
Deswegeh weil der Text, der im DIV ist, das DIV nicht ganz ausfüllen soll und so weiter(grafikers idee nicht meine )mit gehts jetzt eher darum das du in einen html container einen weiteren html container lädst usw. ...
mir fehlt leider gerade die zeit einen lösungsansatz zu suchen in dem ganzen..
vll liegts ja schon daran? Ich sehe ja nur eine X-bar .. da muss ja dann wohl was nach rechts gerutscht sein.
-
Jockelx schrieb:
1. Gebot der allgemeinen Programmierung
Ihr solltet nicht blind, ausnahmslos und pauschal jedes 'Gebot' von jedem selbsternannten Guru befolgen.Nicht selbsternannt und kein Guru: Quelle
-
War mir wohl klar, dass es diese Richtlinie gibt und sie nicht von dir kommt.
Nur sollte man diese Richtlinien als Richtlinien sehen und nicht als Gebote oder Gesetze, die man niemals brechen darf.Wir hatten hier im Forum auch schon den Link, wo wieder ein Guru (und das meine ich gar nicht abwertend) den Gebrauch von Tabellen wieder 'erlaubt' hat.
Du kannst dich gerne einschränken lassen und irgendetwas nicht nutzen, weil es irgendwer verboten hat.
Nur wenn du diese Richtlinien als Gebote im Forum verbreitest, musst du halt mit Kontra rechnen
-
Ich hab auch 'ne Seite am Laufen, wo ich zwei Tabellen als Layout missbrauche, nur da ist es mir bewusst. Aber das Problem hier kann daran liegen, und deshalb hab ich das angebracht. Die Gebotsaufmachung sollte dabei nur unterstreichen, dass es fuer das hier beschriebene Problem durchaus wichtig sein koennte, war also bewusst dramatisiert.
-
Ok, viel heisse Luft um nix
-
Also, lieber TE ich habe mit 4 Divs nun etwa dein gewünschtes Layout.
Ausarbeiten musst du es selbst. - Ansonsten hier, wie ichs machen würde:
Im Head bzw. einer externen CSS-Datei:
<style type="text/css"> body { margin:auto; } #header { position:absolute; left:0; top:0; width: 99.85%; height: 20%; border: 1px solid #000; } #menu { position: absolute; top: 20%; left: 0; width: 99.85%; height: 5%; border: 1px solid #000; } #left { position:absolute; left: 0; width: 20%; height: 74.839%; top: 25%; border: 1px solid #000; } #content { width: 60%; position: absolute; left: 20%; top: 25%; height: 74.839%; border: 1px solid #000; } </style>Der Bodybereich:
<div id="header">bla</div> <div id="menu">Lorem | Ipsum | Dolor | Sit | Amet</div> <div id="left">Blabla</div> <div id="content">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. </div>Ist jetzt nur ein Grundlayout in Schwarz-Weiss. - Ansonsten, viel Spaß damit.
