mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 15:28 Benutzername: Passwort: Auto-Login

Thema: CSS DIV 100% Höhe vom 23.06.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS DIV 100% Höhe
Autor Nachricht
focus82
Threadersteller

Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 23.06.2009 10:10
Titel

CSS DIV 100% Höhe

Antworten mit Zitat Zum Seitenanfang

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 09:45, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 23.06.2009 10:21
Titel

Antworten mit Zitat Zum Seitenanfang

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 10:26, insgesamt 4-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
naturalshirts

Dabei seit: 15.06.2009
Ort: Potsdam
Alter: 54
Geschlecht: Weiblich
Verfasst Di 23.06.2009 11:06
Titel

Re: CSS DIV 100% Höhe

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
focus82
Threadersteller

Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 23.06.2009 12:00
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 23.06.2009 12:11
Titel

Antworten mit Zitat Zum Seitenanfang

pack das hintergrundbild in div#main.
  View user's profile Private Nachricht senden
naturalshirts

Dabei seit: 15.06.2009
Ort: Potsdam
Alter: 54
Geschlecht: Weiblich
Verfasst Di 23.06.2009 12:13
Titel

Antworten mit Zitat Zum Seitenanfang

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. *ha ha* 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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
focus82
Threadersteller

Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 23.06.2009 13:48
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ähnliche Themen höhe vom div?
css div container höhe?
Problem mit DIV-Höhe
iframe höhe auf 90%
2 DIV's im DIV; Automatische Höhe
Div in div, höhe variabel?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.