tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von Xervos
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
499
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 01.09.11 17:34 #1
    QUEST08 QUEST08 ist offline Mitglied Gold
    Registriert seit
    Jul 2008
    Beiträge
    178
    Hallo,

    tja, ich kämpfe jetzt schon eine ganze weile mit einem wohl eigentlich recht einfachen Problem:

    Ich möchte 2 DIV-Elemente untereinander haben.
    Das erste soll sich dem Inhalt anpassen, jedoch mindestens Fensterfüllend sein, abzüglich dem "Footer"-DIV.

    HTML-Code:
    <div id="wrapper">
  <div id="contentzone"></div>
  <div id="footerzone"></div>
</div>
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

    #wrapper {
  height: 100%;
  min-height: 100%;
  width: 100%;
  min-width: 100%;
  background-color: #161616;
  padding: 0px;
  margin: 0px;
}
 
#contentzone {
  height: 100%;
  min-height: 100%;
  width: 100%;
  min-width: 100%;
  padding: 0px;
}
 
#footerzone {
  height: 30px;
  min-height: 30px;
  width: 100%;
  min-width: 100%;
  background-color: #161616;
  padding: 0px;
  margin: 0px;
}

    Der eigentliche Inhaltsbereich soll, auch wenn er leer ist, das komplette Fenster füllen. Der Footer soll aber noch in der Fensterhöhe sein und nicht nach unten geschoben werden. Somit soll beides zusammen 100%-Fensterhöhe ergeben. Gleichzeitig soll aber bei viel Inhalt in "contentzone" die Scrollbar angezeigt werden und der Footer ganz unten bleiben.
    Hat jemand zufällig den passenden Kniff?
    Geändert von QUEST08 (01.09.11 um 17:40 Uhr)
     
    Zitieren Zitieren
  2. 02.09.11 12:05 #2
    Avatar von Xervos
    Xervos Xervos ist offline Mitglied Silber
    Registriert seit
    May 2010
    Beiträge
    93
    Hallo,

    weiß nicht ob das, das ist was du brauchst

    HTML-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" lang="de" xml:lang="de">
<head>
<style type="text/css">
html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body {
	font-family: futura, Verdana;
	font-size: 10px;
}

div#main_container {
	position: relative;
	width: 100%;
	height: 100%;
}

div#Content {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 80%;
	overflow: auto;
	overflow-x: hidden;
	background-color: red;
}

div#Footer {
	position: absolute;
	top: 80%;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: black;
}


</style>
</head>
<body>
<div id="main_container">
	<div id="Content">
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		
	</div>
	<div id="Footer">
	</div>
</div>
</body>
</html>
    so habe ich das halt verstanden

    lg
    QUEST08 bedankt sich. 
    Zitieren Zitieren
  3. 02.09.11 12:36 #3
    QUEST08 QUEST08 ist offline Mitglied Gold
    Registriert seit
    Jul 2008
    Beiträge
    178
    Hallo Xervos,

    ja fast perfekt. Nur das die Scrollbar über das komplette Fenster gehen soll. Aber das sieht schon mal sehr gut aus. Das mit der Scrollbar werd ich jetzt noch versuchen. Vielen vielen Dank******

    Falls du was wegen der Scrollbar zur Hand hast, gerne. Aber irgendwie bekomme ich das schon hin.

    Danke!

    Grüße,
    QUEST08
     
    Zitieren Zitieren
« 2 DIV nebeneinander geht nicht | JavaScript in CCS ausführen um Hintergrundbild zu ändern? »

Ähnliche Themen

  1. CSS div untereinander Problem
    Von silizius im Forum CSS
    Antworten: 3
    Letzter Beitrag: 28.03.11, 20:53
  2. Div neben- und untereinander
    Von xthetronx im Forum CSS
    Antworten: 3
    Letzter Beitrag: 28.05.07, 23:17
  3. 2 Div's untereinander
    Von Sebigf im Forum CSS
    Antworten: 1
    Letzter Beitrag: 13.02.06, 12:48
  4. Variabel aus Variabel ermitteln?
    Von notebook20000 im Forum PHP
    Antworten: 1
    Letzter Beitrag: 12.11.05, 16:59
  5. tabelle untereinander?
    Von GrObY im Forum HTML & XHTML
    Antworten: 12
    Letzter Beitrag: 10.04.03, 16:25