|
|||
[Div]Herausforderung:Höhe=100%
Hallo,
Mein erster Post - grüße euch . Hab da eher ne rethorische Frage, denn das scheint generell in css/div nicht möglich zu sein. Und zwar möchte ich meine seite auf 100% Höhe skalieren. Aber das funzt mit divs nur bedingt. Hier ist mein Problem: www.nicmare.de/uhlenbrock/startseite.html .Die Divs nehmen das mit der 100% Skalierung irgendwie zu genau . Es sollen keine Scrollbars erscheinen. Eben nur wenn auch der INhalt das verlangt. Und der mittlere INhalts div soll nur so groß sein, dass die gesamte Seite sich dem Browserfenster anpasst. Hier die Frage: Kennt jemand ne Lösung bzw nen kleinen Trick? Habe schon überlegt den Footer in den Background von dem (unsichtbaren) center div zu packen. Aber dann würde der Text in der Seite selbst, über den Footer laufen und man kann auch keine Links in den Footer packen. |
Sponsored Links |
|
|||
Hi,
erstmal dieser Link: http://www.quirksmode.org/css/100percheight.html und dann den Inhalt auf overflow:scroll setzen. Greets
__________________
Ein Gedanke... unendliche Verbindungen |
Sponsored Links |
|
|||
hey, guter link aber hilft mir rein garnicht weiter weil darüber bin ich ja längst hinaus. mein problem is wie gesagt nen bissl komplexer.
" if you want to make an element as high as the entire page (whatever this height may be) you're out of luck. " is bereits die erkenntnis die ich gesammelt habe aber ich möchte ehrlich gesagt nich so leicht aufgeben und soviel ich weiß funzt overflow nur beim ie?! |
|
|||
ok,
also kann denn der Inhalt eine Scrollleiste haben bei Bedarf? Mach doch ein header ein Inhalt und ein footer getrennt. Und setze alles in ein Main. oder so in etwa: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { scrollbar-arrow-color:#000000; scrollbar-face-color: Pink; scrollbar-highlight-color:#000000; scrollbar-3dlight-color: Pink; scrollbar-shadow-color:#000000; scrollbar-darkshadow-color: Pink; scrollbar-track-color:#F8F8F8; font-family: Arial; font-size: 14px; letter-spacing: normal; word-spacing: normal; white-space: normal; margin: 0; padding: 0; } #oben { position: absolute; top: 0; width: 795px; height: 100px; padding: 0; margin-left:-397.5px; left:50%; border-bottom: 2px groove LightGrey; border-right: 2px groove LightGrey; border-left: 1px solid LightGrey; border-top: 1px solid LightGrey; background-color: #F8F8F8; } #mitte { width: 795px; height: 420px; margin-top:-210px; margin-left:-397.5px;top:50%;left:50%;position:absolute; text-align:left; padding: 0; border-bottom: 2px groove LightGrey; border-right: 2px groove LightGrey; border-left: 1px solid LightGrey; border-top: 1px solid LightGrey; background-color: #F8F8F8; text-align: left; overflow: auto; } #unten { position: absolute; bottom: 0; width: 795px; height: 25px; padding: 0; margin-left:-397.5px; left:50%; border-bottom: 2px groove LightGrey; border-right: 2px groove LightGrey; border-left: 1px solid LightGrey; border-top: 1px solid LightGrey; background-color: #F8F8F8; } </style> </head> <body scroll=auto style="padding:0px; margin:0px; height:100%; width:100%; "> <div id="oben"></div> <div id="mitte"> Let me not to the marriage of true minds whose worth's unknown, although his height be taken. Love alters not with his brief hours and weeks, love's not time's fool, though rosy lips and cheeks admit impediments; love is not love. If this be error and upon me proved, I never writ, nor no man ever loved. That looks on tempests and is never shaken; it is the star to every wand'ring bark, love's not time's fool, though rosy lips and cheeks. But bears it out even to the edge of doom. Oh, no, it is an ever fixed mark admit impediments; love is not love let me not to the marriage of true minds. Which alters when it alteration finds, it is the star to every wand'ring bark, admit impediments; love is not love. Love's not time's fool, though rosy lips and cheeks within his bending sickle's compass come; or bends with the remover to remove. But bears it out even to the edge of doom. Love alters not with his brief hours and weeks, if this be error and upon me proved, that looks on tempests and is never shaken. Love's not time's fool, though rosy lips and cheeks admit impediments; love is not love within his bending sickle's compass come. I never writ, nor no man ever loved. Oh, no, it is an ever fixed mark it is the star to every wand'ring bark, which alters when it alteration finds. Love alters not with his brief hours and weeks, if this be error and upon me proved, whose worth's unknown, although his height be taken. Within his bending sickle's compass come; love's not time's fool, though rosy lips and cheeks I never writ, nor no man ever loved. Let me not to the marriage of true minds it is the star to every wand'ring bark, oh, no, it is an ever fixed mark. Within his bending sickle's compass come; love alters not with his brief hours and weeks. Whose worth's unknown, although his height be taken. Within his bending sickle's compass come; love's not time's fool, though rosy lips and cheeks that looks on tempests and is never shaken. Which alters when it alteration finds, it is the star to every wand'ring bark, love alters not with his brief hours and weeks. Admit impediments; love is not love or bends with the remover to remove. Let me not to the marriage of true minds within his bending sickle's compass come; I never writ, nor no man ever loved. It is the star to every wand'ring bark, if this be error and upon me proved. Admit impediments; love is not love love's not time's fool, though rosy lips and cheeks love alters not with his brief hours and weeks. That looks on tempests and is never shaken; or bends with the remover to remove. But bears it out even to the edge of doom. Oh, no, it is an ever fixed mark love's not time's fool, though rosy lips and cheeks let me not to the marriage of true minds. </p> </div> <div id="unten"></div> </body> </html>
__________________
Ein Gedanke... unendliche Verbindungen |
|
|||
Hey - super für die schnelle hilf.e Aber So habe ich das ja bereits gemacht .
aber ich kann die divs nich absolut positionieren da sie zentriert werden. kansnt ja mal innen quelltext schauen von meinem link?! übrigens: wnen der inhalt umfangreich wird, können bzw müssen scrollbars kommen und der footer soll unter dem content bleiben. wenn es nur wenig inhalt gibt, so soll die seite 100% der bildschirmfläche füllen und keine scrollbars erscheinen und der footer unterm content bleiben. |
|
|||
Code:
#mitte { width: 795px; height: 420px; margin-top:-210px; margin-left:-397.5px;top:50%;left:50%;position:absolute; text-align:left; <------ zentriert Div padding: 0; border-bottom: 2px groove LightGrey; border-right: 2px groove LightGrey; border-left: 1px solid LightGrey; border-top: 1px solid LightGrey; background-color: #F8F8F8; text-align: left; overflow: auto; <------ wenn Inhalt es verlangt } wieso hast du eigentlich das erste div in posotion:relative? Relative zu welchem div?
__________________
Ein Gedanke... unendliche Verbindungen |
|
|||
Zitat:
|
|
|||
interessante ansätze. werde mir diese nochmal in ner ruhigen minute anschauen. vielen dank! hat mir wirklich weitergeholfen!
ps: habe aus testzwecken einfach mal gesamten quelltext da oben ausprobiert und es scheint ja zu schön um wahr zu sein. es sieht so aus als hätteich gefunden was ich tagelang gesucht und gescriptet habe . daaaankeee raf! |
|
|||
hmm, wieso wusste ich dass ich mich nochmal melden würde?
hab deine src mal nen bissl aufgeräumt. funzt an und für sich. aber macht man das fenster experimentellerweise mal etwas kleiner (sodass man scrollen muss), so wird der untere div nicht unter den inhalt gepackt sondern liegt einfach in der "luft", über den text. warum ist das so? oder besser: wie vermeide ich das? also der untere div klebt quasi immer am bottom. scheint nen bug zu sein?! Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { font-family: Arial; font-size: 14px; letter-spacing: normal; word-spacing: normal; white-space: normal; margin: 0; padding: 0; } #oben { position: absolute; top: 0; width: 795px; height: 100px; padding: 0; margin-left:-397.5px; left:50%; background-color: #F8F8F8; } #mitte { width: 795px; height: auto; margin-left:-397.5px; top:100px; left:50%; position:absolute; padding: 0; background-color: #F8F8F8; text-align: left; overflow: auto; } #unten { margin-left:-397.5px; left:50%; position: absolute; bottom: 0; width: 795px; height: 25px; padding: 0; background-color: #F8F8F8; } </style> </head> <body scroll=auto style="padding:0px; margin:0px; height:100%; width:100%; "> <div id="oben"></div> <div id="mitte"> Let me not to the marriage of true minds whose worth's unknown, although his height be taken. Love alters not with his brief hours and weeks, love's not time's fool, though rosy lips and cheeks admit impediments; love is not love. If this be error and upon me proved, I never writ, nor no man ever loved. That looks on tempests and is never shaken; it is the star to every wand'ring bark, love's not time's fool, though rosy lips and cheeks. But bears it out even to the edge of doom. Oh, no, it is an ever fixed mark admit impediments; love is not love let me not to the marriage of true minds. Which alters when it alteration finds, it is the star to every wand'ring bark, admit impediments; love is not love. Love's not time's fool, though rosy lips and cheeks within his bending sickle's compass come; or bends with the remover to remove. But bears it out even to the edge of doom. Love alters not with his brief hours and weeks, if this be error and upon me proved, that looks on tempests and is never shaken. Love's not time's fool, though rosy lips and cheeks admit impediments; love is not love within his bending sickle's compass come. I never writ, nor no man ever loved. Oh, no, it is an ever fixed mark it is the star to every wand'ring bark, which alters when it alteration finds. Love alters not with his brief hours and weeks, if this be error and upon me proved, whose worth's unknown, although his height be taken. Within his bending sickle's compass come; love's not time's fool, though rosy lips and cheeks I never writ, nor no man ever loved. Let me not to the marriage of true minds it is the star to every wand'ring bark, oh, no, it is an ever fixed mark. Within his bending sickle's compass come; love alters not with his brief hours and weeks. Whose worth's unknown, although his height be taken. Within his bending sickle's compass come; love's not time's fool, though rosy lips and cheeks that looks on tempests and is never shaken. Which alters when it alteration finds, it is the star to every wand'ring bark, love alters not with his brief hours and weeks. Admit impediments; love is not love or bends with the remover to remove. Let me not to the marriage of true minds within his bending sickle's compass come; I never writ, nor no man ever loved. It is the star to every wand'ring bark, if this be error and upon me proved. Admit impediments; love is not love love's not time's fool, though rosy lips and cheeks love alters not with his brief hours and weeks. That looks on tempests and is never shaken; or bends with the remover to remove. But bears it out even to the edge of doom. Oh, no, it is an ever fixed mark love's not time's fool, though rosy lips and cheeks let me not to the marriage of true minds. </p> </div> <div id="unten"></div> </body> </html> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|