zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden [Div]Herausforderung:Höhe=100%

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.02.2005, 11:28
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.02.2005
Beiträge: 137
nicmare befindet sich auf einem aufstrebenden Ast
Standard [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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.02.2005, 12:29
raf raf ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.03.2004
Beiträge: 260
raf befindet sich auf einem aufstrebenden Ast
Standard

Hi,

erstmal dieser Link:

http://www.quirksmode.org/css/100percheight.html


und dann den Inhalt auf overflow:scroll setzen.

Greets
__________________
Ein Gedanke... unendliche Verbindungen
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.02.2005, 12:39
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.02.2005
Beiträge: 137
nicmare befindet sich auf einem aufstrebenden Ast
Standard

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?!
Mit Zitat antworten
  #4 (permalink)  
Alt 17.02.2005, 12:43
raf raf ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.03.2004
Beiträge: 260
raf befindet sich auf einem aufstrebenden Ast
Standard

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>
Hinweis für Besserwisser, Code nur als Test gedacht!
__________________
Ein Gedanke... unendliche Verbindungen
Mit Zitat antworten
  #5 (permalink)  
Alt 17.02.2005, 13:14
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.02.2005
Beiträge: 137
nicmare befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 17.02.2005, 13:22
raf raf ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.03.2004
Beiträge: 260
raf befindet sich auf einem aufstrebenden Ast
Standard

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
}
das ist zentriert.

wieso hast du eigentlich das erste div in posotion:relative?
Relative zu welchem div?
__________________
Ein Gedanke... unendliche Verbindungen
Mit Zitat antworten
  #7 (permalink)  
Alt 17.02.2005, 13:22
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von nicmare
aber ich kann die divs nich absolut positionieren da sie zentriert werden.
[ ] du hast das beispiel ausprobiert, und verstanden, wofür raf negative margins einsetzt.
Mit Zitat antworten
  #8 (permalink)  
Alt 17.02.2005, 14:14
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.02.2005
Beiträge: 137
nicmare befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #9 (permalink)  
Alt 17.02.2005, 16:05
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.02.2005
Beiträge: 137
nicmare befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.02.2005, 22:44
raf raf ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.03.2004
Beiträge: 260
raf befindet sich auf einem aufstrebenden Ast
Standard

Bitte poste doch mal deinen Quelltext
__________________
Ein Gedanke... unendliche Verbindungen
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



Alle Zeitangaben in WEZ +2. Es ist jetzt 12:38 Uhr.