 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 28.08.2007 13:13
Titel DIV Problem - 100% Höhe |
  |
|
Hallo zusammen,
ich habe ein kleines Problem. Ich habe ein dreispaltiges Layout, bei dem alle drei Spalten gleich lang sein sollen, nämlich genau so lang, wie die Spalte mit dem längsten Inhalt. Soweit kein Problem, faux colums helfen mir da weiter. Die zweite Bedingung ist aber, dass wenn der Inhalt mal kleiner sein sollte, wie das Browserfenster, die drei Divs jeweils bis zum Browserende gehen.
Nochmal zusammengefasst: Die drei Spalten müssen auf jeden Fall bis zum unteren Browserende gehen, ist der Inhalt länger, dann sollen sie alle drei mitwachsen.
Hab schon gegoogelt und hier im Forum nachgelesen, aber nicht wirklich was gefunden, das mir weiterhilft. Ist das überhaupt möglich, oder muss ich das mit Tabellen realisieren (würde es gern vermeiden)
Vielen Dank schonmal
Zuletzt bearbeitet von Krisslinger am Fr 31.08.2007 11:51, insgesamt 2-mal bearbeitet
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 28.08.2007 13:17
Titel Re: DIV Problem - 100% Höhe |
|
|
| Wittlinger hat geschrieben: | | ... und hier im Forum nachgelesen, aber nicht wirklich was gefunden, das mir weiterhilft. |
 Vielleicht solltest du die Suche doch nochmal zum Einsatz bringen.
|
|
| |
 |
|
|
Anzeige
|
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Di 28.08.2007 13:24
Titel Re: DIV Problem - 100% Höhe |
|
|
Servus 
| Wittlinger hat geschrieben: |
oder muss ich das mit Tabellen realisieren (würde es gern vermeiden)
|
form follows function, also gar nicht erst auf die Idee mit Tabellen kommen 
| Wittlinger hat geschrieben: |
Nochmal zusammengefasst: Die drei Spalten müssen auf jeden Fall bis zum unteren Browserende gehen, ist der Inhalt länger, dann sollen sie alle drei mitwachsen. |
Pack ein Div außen rum, gib ihm das faux-columns-Bild mit, gib dem html und body eine Höhe von 100%, dem Div drum herum ein min-height mit 100%, dann klappt das schon.
Für den IE musst du noch einen kleinen Hack einbauen, denn der versteht min-height nicht, interpretiert aber height, wie min-height.
Fütter google richtig, dann klappt das auch da
| Code: |
html,
body {
height:100%
}
div#aussen {
min-height:100%;
height:auto !important;
height:100%
} |
|
|
| |
|
|
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 28.08.2007 13:35
Titel
|
|
|
Na herzlichen Dank, dann werd ich das mal ausprobieren. Hab ehrlich kein Bock darauf, Tabellen zu verweden, schon aus dem Grund weil ich die übersrpungen hab, nach den Frames kamen gleich die Divs und bis dahin hab ich auch immer alles hinbekommen, nur diesmal war ich kurz vorm Scheitern, dank eurer Hilfe sollte das ja jetzt kein Problem mehr darstellen.
In diesem Sinne: Vielen Dank
Edit: Ok hat funktioniert. Vielen Dank. Einziges Problem macht der IE 5.5, aber da muss ich dann halt ne alternative 5.5.css laden. Super, vielen Dank nochmal!
Zuletzt bearbeitet von Krisslinger am Di 28.08.2007 16:10, insgesamt 6-mal bearbeitet
|
|
| |
|
|
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 31.08.2007 12:03
Titel
|
|
|
OK, wider erwarten hat doch nicht alles funktioniert.
Nachdem ich den Rat von nicoG befolgt hab, hat soweit fast alles funktioniert. IE 6 und 7, Opera und Firefox haben die Seite auf 100% der Browsergröße angepasst, obwohl der Inhalt kürzer ist. Zu Testzwecken hab ich den Contentbereich mal mit viel Text gefüllt um zu sehen, was passiert, wenn er länger wird als das Browserfester. IE 6 und 7 skalieren wie es sein soll alle Bereiche bis nach unten, Firefox und Opera allerdings nicht, da wächst nur der Contentbereich weiter, der Rest bleibt auf der Höhe des Browserausschnitts.
Ich hab dann einfach nen Footer unten ran gepackt und siehe da, alle Browser skalieren richtig. Jetzt wollte ich den Footer aber mit Text füllen, wenn der Content Überlänge hat passt auch alles soweit. Ist der Content allerdings leer bzw sehr kurz, richtet sich der Footer am längsten Element aus, das allerdings nur bis zur Mitte des Browserfensters geht. Der Footer sollte aber immer am unteren Bildschirm Rand liegen.
Hier mal die CSS:
| Code: |
html,
body {
height: 100%;
margin: 0px;
background: url(../images/main_background.gif) repeat;
text-align: center;
}
#container {
background: url(../images/container_background.gif) repeat-y;
min-height: 100%;
height: auto !important;
height: 100%;
width: 996px;
margin: 0px auto;
text-align: left;
}
#header {
width: 996px;
height: 80px;
background: url(../images/header.gif) no-repeat;
}
#navi {
float: left;
width: 182px;
background: url(../images/navi_rundung.gif) top right no-repeat;
border-top: 2px #FFFFFF solid;
font: 12px/24px Verdana, sans-serif;
}
#main {
float: left;
width: 574px;
}
#contact {
float: left;
width: 240px;
padding-top: 54px;
background: url(../images/contact_top.gif) no-repeat top;
}
#footer {
clear: both;
width: 996px;
height: 20px;
color: #FFFFFF;
}
#animation {
width: 574px;
height: 154px;
background: url(../images/animation_background.gif) no-repeat;
}
#angebot {
width: 570px;
height: 66px;
background-color: #ffe3ca;
border: 2px #FFFFFF solid;
}
#content {
width: 570px;
background-color: #fca150;
border-left: 2px #FFFFFF solid;
border-right: 2px #FFFFFF solid;
}
#formular {
background-color: #d4d9e8;
padding-top: 23px;
padding-left: 23px;
border-top: 2px #FFFFFF solid;
border-bottom:2px #FFFFFF solid;
}
|
Und hier die HTML:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bekanntes Dokument</title>
<link rel="stylesheet" href="css/screen.css" media="screen">
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navi">
<ul>
<li><a class="home" href="#">Home</a></li>
<li><a class="aktiv" href="#">Fahrtraining</a></li>
<li><a class="ebene2" href="#">PKW</a></li>
<li><a class="ebene2" href="#">Motorrad</a></li>
<li><a class="ebene2" href="#">LKW</a></li>
<li><a class="ebene2" href="#">Bus</a></li>
<li><a class="navi" href="#">Firmentraining</a></li>
<li><a class="navi" href="#">Trainingsgelände</a></li>
<li><a class="navi" href="#">Specials</a></li>
<li><a class="navi" href="#">Presse</a></li>
<li><img src="images/navi_strasse.gif" /></li>
</ul>
</div>
<div id="main">
<div id="animation"></div>
<div id="angebot"></div>
<div id="content">
test<br>
</div>
</div>
<div id="contact">
<div id="formular">
<h1>Nehmen Sie jetzt Kontakt auf:</h1>
<form method="post">
<table class="tabelle">
<tr>
<td class="button"><input type="radio" name="Anrede" value="Herr"/></td>
<td class="anrede">Herr</td>
<td class="button"><input type="radio" name="Anrede" value="Frau"/></td>
<td class="anrede">Frau</td>
</tr>
</table>
<input class="felder" type="text" value="Vorname:"/>
<input class="felder" type="text" value="Nachname:"/>
<input class="felder" type="text" value="Telefon:"/>
<input class="felder" type="text" value="E-Mail:"/>
<h2>Ich möchte:</h2>
<table>
<tr>
<td class="check"><input class="check" type="checkbox" name="wunsch" value="Rückruf" /></td>
<td class="anrede">Rückruf</td>
</tr>
<tr>
<td class="check"><input class="check" type="checkbox" name="wunsch" value="Angebot" /></td>
<td class="anrede">Angebot</td>
</tr>
<tr>
<td class="check"><input class="check" type="checkbox" name="wunsch" value="Sonstiges" /></td>
<td class="anrede">Sonstiges</td>
</tr>
</table>
<h2>Ihre Nachricht:</h2>
<textarea class="text"></textarea>
<a class="contact" href="#">Absenden</a>
<div class="adresse">
<div class="boldbig">Firma</div>
Straße<br />
Stadt<br />
<div class="bold">Telefon</div>
Telefax
</div>
</form>
</div>
</div>
<div id="footer">
© 2007 Firma<br />
Impressum | Datenschutz
</div>
</div>
</body>
</html> |
Wär echt schick wenn mir jemand dabei helfen könnte, komm nicht mehr weiter. Vielen Dank
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 31.08.2007 12:10
Titel Re: DIV Problem - 100% Höhe |
|
|
| m hat geschrieben: | | Wittlinger hat geschrieben: | | ... und hier im Forum nachgelesen, aber nicht wirklich was gefunden, das mir weiterhilft. |
Vielleicht solltest du die Suche doch nochmal zum Einsatz bringen. |
Suche: "Footer"
|
|
| |
|
|
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 31.08.2007 16:02
Titel
|
|
|
Ich weiß ja nicht ob du den ganzen Tag nichts besseres zu tun hast, als dich selbst zu zitieren, aber ich habe die Suche benutzt und erst dann gepostet. Ich bin in verschiedenen Foren und Topic auf den Artikel von Manuel Biehl :Einmal Erdgeschoss bitte, gestoßen und hab das auch ausprobiert, ging aber nicht. Hab dann hier geposted. Und nach deinem Kommentar hab ich mich dann nochmal hingesetzt und alles durchgemacht und auch nochmal neu umgestellt, und trotzdem hab ich nicht den gewünschten Effekt.
Ich bin jetzt soweit, dass zwar alle den Footer unten anzeigen, aber wenn gescrollt wird, dann wächst nur bei den beiden IEs alles mit, bei Opera und Firefox wird der Restbereich nicht mitskaliert.
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 31.08.2007 16:22
Titel Re: DIV Problem - 100% Höhe |
|
|
| m hat geschrieben: | | m hat geschrieben: | | Wittlinger hat geschrieben: | | ... und hier im Forum nachgelesen, aber nicht wirklich was gefunden, das mir weiterhilft. |
Vielleicht solltest du die Suche doch nochmal zum Einsatz bringen. |
Suche: "Footer" |
Ganz ehrlich, das Thema gibt es so oft, und ich habe so oft schon etwas dazu gesagt
dass es einfach irgendwann anfängt zu nerven wenn einem erzählt wird "ich habe die
Suche benutzt aber nichts gefunden".
Ich zitiere mich selbst gerne ja, und es ist eher so dass ich besseres zu tun habe
als Antworten jeden Tag auf ein neues zu wiederholen und verweise dann schon mal
auf die Suche was wohl korrekt so ist wenn man genau weiß dass sich durch eine Suche
das Problem lösen lässt. Ist klar, ich bräuchte auch gar nicht antworten, aber das hilft
noch weniger und ein wenig eigeninitiative schadet sicher nicht.
| 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>CSS Layout, height 100% & Footer</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
div#wrapper {
position: relative;
margin: 0 auto;
width: 800px;
min-height: 100%;
height: auto !important;
height: 100%;
background: #eee;
}
div#header {
height: 80px;
background: #ccc;
}
div#content {
background: #bbb;
padding-bottom: 50px;
}
div#footer {
position: absolute;
bottom: 0;
clear: both;
width: 800px;
height: 20px;
background: #ddd;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="content">
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html> |
Zuletzt bearbeitet von m am Fr 31.08.2007 17:13, insgesamt 2-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Problem mit der Höhe
Problem mit DIV-Höhe
[css] Problem mit div Höhe
[css problem] content höhe
CSS-Problem mit der Höhe [gelöst]
IE Problem mit Höhe bei XHTML 1.0
|
|
|
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.
|
|
