Autor |
Nachricht |
focus82
Threadersteller
Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 23.06.2009 11:10
Titel CSS DIV 100% Höhe |
|
|
Hallo,
ich weiß, dass das Thema schon 1000 Mal durch diskutiert und erklärt wurde... Leider schaffe ich es nicht, meinen Content-Bereich auf 100%-Höhe zu bekommen. Egal, wo ich die 100% angebe, die Seite wird nicht über die komplette höhe gefüllt. Ich habe mal mein HTML-Template auf das nötigste reduziert:[/code]
Code: |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body >
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%"></td>
<td>
<div id="main">
<div id="header"></div>
<div id="banner">
</div>
<div id="wrapper">
<div id="sidebar">
<div id="language">
<a href="#">link1</a>
<a href="#">link2</a>
</div>
</div>
<div id="headline">Home</div>
<div id="content"><a id="wb_section_2" name="wb_section_2">Hier steht der Content</div>
</div>
</div>
</td>
<td width="50%"></td>
</tr>
</table>
</body>
</html>
|
Code: | html {
height:100%;
}
body
{
background-color: #d4d4d4;
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
padding: 0px;
}
#wrapper
{
background-color: white;
position: relative;
}
#language
{
background-color: #FFFFFF;
text-decoration: none;
}
#language a
{
background-color: #FFFFFF;
text-decoration: none;
}
#nav
{
width: auto;
height: auto;
border-top: 1px solid white;
color: #383838;
background-color: #c8c7c8;
margin-left: auto;
margin-right: auto;
}
#nav li
{
display: block;
float: right;
height: 22px;
width: auto;
text-align: center;
line-height: 22px;
}
#nav li a
{
display: block;
padding-left: 15px;
padding-right: 15px;
line-height: 22px;
color: #383838;
text-decoration: none;
}
#nav li a:hover
{
background-color: #aaaaaa;
}
#header
{
height: 68px;
}
#main
{
width: 800px;
background-color: white;
}
#menu
{
height: 22px;
padding: 0px;
position: relative;
font-color: #383838;
background-color: #d4d4d4;
}
#sidebar
{
float: left;
text-align: left;
margin-left: 0;
background-color: #fefefe;
position: relative;
background-repeat: repeat-x;
background-position: bottom left;
padding: 50px 10px 20px 35px;;
background-color: #fefefe;
width: 160px;
}
#sidebar h3
{
font-color: #666666;
font-size: 13px;
border-bottom: 1px solid #cccccc;
margin-bottom: 4px;
margin-top: 16px;
clear: both;
}
#sidebar ul
{
margin-left: 1em;
padding-left: 0px;
}
#sidebar p
{
margin-bottom: 8px;
}
#sidebar div.subtabs ul{
list-style: none;
width: 180px;
margin: 0;
padding: 0;
}
#sidebar div.subtabs ul ul{
list-style: none;
width: 128px;
margin: 0;
padding: 0 0 0 5px;
}
#sidebar div.subtabs ul ul ul{
list-style: none;
width: 140px;
margin: 0;
padding: 0 0 0 5px;
}
#sidebar div.subtabs ul a{
width:100%;
margin: 3px;
text-align:left;
font-size:0.8em;
font-family:Arial;
font-weight:bold;
text-decoration:none;
word-wrap:normal; color:#505050;
display:block;
padding:3px 3px 3px 5px;
background:#f4f4f4;
border-top:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #cccccc;
}
#sidebar div.subtabs ul a:hover {
text-decoration:none;
color:#505050;
border-top:1px solid #b0b0b0;
border-right:1px solid #b0b0b0;
border-bottom:1px solid #b0b0b0;
border-left:4px solid #4c74af;
}
#headline
{
width: 520px;
display: block;
position: relative;
padding: 50px 5px 5px 5px;
color: #333333;
font-size: 18px;
}
#content
{
margin: 0 0 0 200px;
width: 520px;
display: block;
position: relative;
padding: 5px 5px 20px 5px;
color: #333333;
min-height:100%;
}
#content h1
{
font-size: 18px;
/* 18px is the default minimum font size for which anti-aliasing will occur. */
margin: 0px;
text-decoration: underline;
}
#content h2
{
font-size: 18px;
/* 18px is the default minimum font size for which anti-aliasing will occur. */
margin: 0px;
text-decoration: underline
}
#content .date
{
float: right;
}
#content .postedBy
{
float: left;
}
#content p
{
line-height: 1.3em;
}
a
{
color: #666666;
}
#banner {
height:130px;
background:#b3c5de;
clear:both;
}
|
Wenn ausreichend Content auf der Seite steht, ist alle i.O..
Außerdem habe ich noch das Problem, dass ich rechts und links vom Main-Block einen Schattenverlauf haben möchte, weiß aber nicht so richtig, wie ich das hin bekomme... Deshalb habe ich es mir erstmal mit einer Tabelle so hin 'gefuscht'...
Vielen Dank im Voraus!
Gruß Focus
Zuletzt bearbeitet von focus82 am Mi 24.06.2009 10:45, insgesamt 1-mal bearbeitet
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 23.06.2009 11:21
Titel
|
|
|
schmeiß mal die tabelle um den div#main raus.
Code: |
html, body {
height:100%;
margin:0;
padding:0;
}
div#main {
width:800px; /*width:50em;*/
min-height:100%;
margin:auto; /* dann brauchst du die tabelle nicht mehr */
}
/*IE6*/
* html div#main {
height:100%;
}
|
setz dich auch mit dem doctype auseinander
http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=doctype
//noch etwas. eine überschrift mittels css#id zu definieren ist quatsch.ein screenreader weiß nicht das es sich dort um eine überschrift handelt. <h> Elemente sind dafür gedacht.
Zuletzt bearbeitet von Kash am Di 23.06.2009 11:26, insgesamt 4-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
naturalshirts
Dabei seit: 15.06.2009
Ort: Potsdam
Alter: 54
Geschlecht:
|
Verfasst Di 23.06.2009 12:06
Titel Re: CSS DIV 100% Höhe |
|
|
focus82 hat geschrieben: | Hallo,
ich weiß, dass das Thema schon 1000 Mal durch diskutiert und erklärt wurde... Leider schaffe ich es nicht, meinen Content-Bereich auf 100%-Höhe zu bekommen. Egal, wo ich die 100% angebe, die Seite wird nicht über die komplette höhe gefüllt. Ich habe mal mein HTML-Template auf das nötigste reduziert:
Wenn ausreichend Content auf der Seite steht, ist alle i.O.. |
Da gibt es einen einfachen Trick, der im Web sehr viel verwendet wird und den ich auch oft benutze, wenn dieses Problem auftaucht: Du baust dir eine Kachel, die das gewünschte Hintergrunfbild enthält, in deinem Bsp. wäre das der weiße HG, Schlagschattenkante und etwas grau. Reicht 1px Höhe, das ganze dann als GIF oder JPG per CSS im body einsetzen, background-repeat: repeat:y und alles ist schick. Er kachelt das dann nach unten über die gesamte Seite - zumindest habe ich dich so verstanden, dass du genau das suchst. Das sollte auch das andere Problem beheben siehe nächstes zitat.
Grüße
naturalshirts
focus82 hat geschrieben: | Außerdem habe ich noch das Problem, dass ich rechts und links vom Main-Block einen Schattenverlauf haben möchte, weiß aber nicht so richtig, wie ich das hin bekomme... Deshalb habe ich es mir erstmal mit einer Tabelle so hin 'gefuscht'...
Vielen Dank im Voraus!
Gruß Focus |
|
|
|
|
|
focus82
Threadersteller
Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 23.06.2009 13:00
Titel
|
|
|
Hallo,
vielen Dank für die schnellen Antworten! Die Höhe mit den 100% passt jetzt, das klappt wirklich super. Nur meinen Farbübergang gekomme ich noch nicht ganz hin... Wenn ich das background-image in den Body-Style packe macht er auch den Farbverlauf über die komplette Seite, aber natürlich nur ganz nach links. Ich will die ja jeweils rechts und links neben den mittleren Kontainer haben. Muss ich dann nochmal zwei divs dafür anlegen?
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 23.06.2009 13:11
Titel
|
|
|
pack das hintergrundbild in div#main.
|
|
|
|
|
naturalshirts
Dabei seit: 15.06.2009
Ort: Potsdam
Alter: 54
Geschlecht:
|
Verfasst Di 23.06.2009 13:13
Titel
|
|
|
focus82 hat geschrieben: | Hallo,
vielen Dank für die schnellen Antworten! Die Höhe mit den 100% passt jetzt, das klappt wirklich super. Nur meinen Farbübergang gekomme ich noch nicht ganz hin... Wenn ich das background-image in den Body-Style packe macht er auch den Farbverlauf über die komplette Seite, aber natürlich nur ganz nach links. Ich will die ja jeweils rechts und links neben den mittleren Kontainer haben. Muss ich dann nochmal zwei divs dafür anlegen? |
Leg deine HG-kachel so an, dass die Verläufe mit drin sind, den div entsprechend breiter. Sieht man ja im Frontend nicht. Und zentriere das HG-Bild: text-align: center. Dafür musst du dann in den anderen divs wieder auf textalign: left gehen, sofern nicht alles zentriert anezeigt werden soll.
|
|
|
|
|
focus82
Threadersteller
Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 23.06.2009 14:48
Titel
|
|
|
Auf die Idee bin ich gar nicht gekommen. Ich habe allerdings das HB mit background-position: center; zentriert. Oder kann das wieder irgend ein Browser nicht? Ich hatte da schon einige Stunden dran rum gefummelt... Also nochmals vielen Dank für die Hilfe!
Gruß Focus
|
|
|
|
|
|
|
|
Ähnliche Themen |
höhe vom div?
2 DIV's im DIV; Automatische Höhe
Div in div, höhe variabel?
DIV verweigert 100% Höhe
DIV Problem - 100% Höhe
prob mit div 100% Höhe
|
|