Die Div an die Höhe der Div anpassen

taschi · 28.06.2012, 14:16

Hallo alle zusammen,

ich bin gerade dabei ein CSS Layout zu machen, befinde mich jedoch noch in der Übungsphase.

Ich habe mein Layout wie folgt in der HTML gegliedert:

HTML-Code:

<body style="text-align:center;">

<div id="container">

<div id="header"> HEADER</div>

<div id="mainnav"> MAINNAVI</div>


<div id="main"> MAIN BEREICH </div>


<div id="footer"> FUSSZEILE </div>


</div><!------Container--->

</body>

Hier ist die CSS:

HTML-Code:

html, body   {
                height:100%;
                color: #000000;
                font-family: Verdana;
                font-size: 12px;
}


#container  {
                width:760px;
                margin:0 auto; 
                text-align:left;
                margin: auto;
                min-height: 100%;
                height:auto !important; 
                height:100%; 
                overflow: hidden !important;
                background-color:red;
}


#header   {        

                height: 150px;
                background-color: green;
}

#mainnav   {        

                height: 30px;
                background-color: yellow;
                text-align: center;
}

            



#main   {

                width: 100%;
                background-color: red; 
                height: 100%;            
}
                



#footer   {

                height: 50px;
                background-color: green;
                clear: both;
}

Nun zu mienem Anliegen:

Ich möchte, dass der MAIN Bereich sich ebenfalls automatisch an die Höhe von der Seite, also an die Höhe von dem Container anpasst.
Nur egal was ich amche, die Höhe lässt sich nur mit einem bestimmten Wert ändern, was aber nicht das ist, was ich gerne hätte.
Ich hoffe ihr könnt mir helfen.

Liebste Grüße

Natascha

Mackymesser111 · 28.06.2012, 14:30

ich verstehe irgendwie dein anliegen nicht ganz, korrigiere mich wenn ich Stuss schreib.

du hast also einen header, ein Menü und einen footer mit festgelegter höhe.
Dein Main Bereich geht unter dem Menü los und endet am unteren ende des Bildschirmes (heigh:100%) und dein footer startet nach dem text "MAIN BEREICH" und liegt über dem div des Main Bereichs.

Wenn du willst das dein Main Bereich, als der div in dem deine Inhalte landen, flexible bleibt solltest du KEINE höhe festlegen. Füll doch mal in deinen "Main Bereich div" text rein. Ich denke das sollte deinem Problem Abhilfe schaffen.

taschi · 28.06.2012, 14:40

Zitat:

Zitat von Mackymesser111

ich verstehe irgendwie dein anliegen nicht ganz, korrigiere mich wenn ich Stuss schreib.

du hast also einen header, ein Menü und einen footer mit festgelegter höhe.
Dein Main Bereich geht unter dem Menü los und endet am unteren ende des Bildschirmes (heigh:100%) und dein footer startet nach dem text "MAIN BEREICH" und liegt über dem div des Main Bereichs.

Wenn du willst das dein Main Bereich, als der div in dem deine Inhalte landen, flexible bleibt solltest du KEINE höhe festlegen. Füll doch mal in deinen "Main Bereich div" text rein. Ich denke das sollte deinem Problem Abhilfe schaffen.

Mein Main endet gerade nicht am unteren Ende des Bildschirms.

Der Mainbereich ist gerade so groß wie der Text und würde mit mehr Text auch größer werden.
Der Footer liegt unter dem Main bereich und hängt somit dann auch irgendwo mittig.

Der Container geht bis ganz nach unten, doch den will ich farblich ungestaltet lassen.

Verstehst du was ich meine?

owieortho · 28.06.2012, 14:59

Ist der "sticky footer" das, was Du erreichen möchtest?

taschi · 29.06.2012, 07:22

Zitat:

Zitat von owieortho

Ist der "sticky footer" das, was Du erreichen möchtest?

Hallo

Also nicht direkt,
das ganze soll nur eine Breite von 760 px haben.
Aber der Footer soll schon am unteren Rand "kleben" und der Mainbereich soll sich dann halt somit automatisch zwischen dem Header der oben "anklebt" und dem Footer erstrecken.

Versteht man das?^^...

mindraper · 29.06.2012, 22:34

hi,

zwischenfrage: wieso ist es wichtig, dass sich der "main"-container bis zum boden erstreckt?
normalerweise wird er ja durch den inhalt nach unten gedrückt.

gruß

Samuelll · 30.06.2012, 18:35

Die Breite des Footers ist für den Fall "Sticky Footer" egal. Das kann man begrenzen.

Wenn es nur darum geht, dass es aussieht, als sei der Main so hoch wie die Seite, kannst Du den betreffenden Hintergrund dem wrapper zuweisen.
So hat man visuell den Eindruck als reicht der Mail bis zum Boden, auch wenn er vorher aufhört.

Wellenbrecher1963 · 30.06.2012, 18:47

mach mal im CSS bei html und body height:100% rein. Dann versteht der Browser, dass er nicht nur die gesamte Breite, sondern auch die gesamte Höhe des Browsers nutzen soll.

Eventuell hilft vielleicht auch das Height:100% mal bei HTML oder bei BODY rein zu machen. Hier musst Du einfach probieren.

Der Grund ist folgender, einige Browser haben regelrechte Verständigungsprobleme oder einfach gesticktes Denken.

Wenn Du ein DIV außen definierst, was keine Höhe hat, denken manche Browser, dass die aktuelle Ausfüllung (z.B. mit Text) die eigentlichen 100% sind. Wenn das darin liegende DIV dann eine height:100% verpasst bekommt, sieht der Browser die 100% der Ausfüllung des äußeren DIVS an.

Anders, wenn Du dem ganz außen liegenden Objekt mitteilst: bitte sei DU 100%, dann macht das Objekt auch das. Bildschirmfüllend Oben, unten, links und rechts.
Denn jede darin liegende Höhe richtet sich immer nach der äußeren Höhe.

Mit anderen Worten, wo nix ist, kann auch nix 100% sein

:-D

Und mit min-height:235px; weist Du dem Objekt an, wenn der Browser zusammen geschoben wird, nur bis zu diesem Wert zusammen geschoben zu werden. Das funzt auch bei min-width:1024px;

Anders herum kannst Du natürlich auch die andere Richtung mit max-height und max-width definieren. So kann man recht anspruchsvolle flexieble Layouts gestalten.

sonnige Grüße
Sylvio

mindraper · 01.07.2012, 23:05

hi.

@TE: siehe unten.

@Wellenbrecher:

Zitat:

Zitat von Wellenbrecher1963

mach mal im CSS bei html und body height:100% rein. Dann versteht der Browser, dass er nicht nur die gesamte Breite, sondern auch die gesamte Höhe des Browsers nutzen soll.

öhm, so weit ich den css-code der TE sehe hat sie das schon getan.

Zitat:

Zitat von Wellenbrecher1963

Eventuell hilft vielleicht auch das Height:100% mal bei HTML oder bei BODY rein zu machen. Hier musst Du einfach probieren.

??? siehe oben? oder soll das etwa bedeuten, die höhenangabe als attribute in die TAGS zu schreiben? falls ja: OMG!!!

Zitat:

Zitat von Wellenbrecher1963

Der Grund ist folgender, einige Browser haben regelrechte Verständigungsprobleme oder einfach gesticktes Denken.

äh... ja. das wage ich allerdings einfach mal zu bezweifeln. selbst, wenn wir vom IE reden. browser haben explizit KEIN "einfach gestRicktes denken".

Zitat:

Zitat von Wellenbrecher1963

Wenn Du ein DIV außen definierst, was keine Höhe hat, denken manche Browser, dass die aktuelle Ausfüllung (z.B. mit Text) die eigentlichen 100% sind.

ok, und wo liegt dann ein fehler im browserrendering vor? ich warte?

Zitat:

Zitat von Wellenbrecher1963

Und mit min-height:235px; weist Du dem Objekt an, wenn der Browser zusammen geschoben wird, nur bis zu diesem Wert zusammen geschoben zu werden.

mit min-height/-width angaben wird dem browser gesagt, dass das betreffende element immer mindestens die angegebene höhe haben soll. das hat allerdings nix mit dem verkleinern/vergrößern des browserfensters explizit zu tun, sondern sagt aus, dass ein element, dessen INHALT nicht zum erreichen der mindest-höhe/-breite ausreicht, mindestens die angegebenen maße haben soll.

@TE:

ein beispiel deines HTML (nur die id-attribute sind anders):

HTML-Code:

<body>
	<div id="container-page">
		<div id="container-head">
			HEAD
		</div><!-- /end container-head -->
		<div id="container-navigation">
			NAVIGATION
		</div><!-- /end container-navigation -->
		<div id="container-content">
			CONTENT
		</div><!-- /end container-content -->
		<div id="container-footer">
			FOOTER
		</div><!-- /end container-footer -->
	</div><!-- /end container-page -->
</body>

dann klappt's damit:

Code:

/* BASIC RESETS */
* {
	margin: 0;
	padding: 0;
}

/* (MIN-)HEIGHTS ON HTML/BODY */
html, body {
	min-height: 100.01%; /* FF-Bug, daher > 100% */
	height: 100%;
}

body {
	background: #333333;
}

/* MAGIC */
#container-page {
	position: relative; /* Achtung, Teil 1 */
	width: 1020px;
	min-height: 100%; /* Wichtig */
	margin: 0 auto; /* Zentrieren */
	background: #ffffff;
}

#container-head {
	position: absolute; /* Absolut positionieren */
	top: 0;
	left: 0;
	z-index: 100; /* Angewohnheit */
	width: 100%;
	height: 150px;
	background: #00ff00;
}

#container-navigation {
	position: absolute; /* Hier nochmal */
	top: 150px; /* Beginn bei unterem Ende Head */
	left: 0;
	z-index: 110;
	width: 100%;
	height: 30px;
	background: #3466ff;
}

#container-content {
	padding: 210px 0 50px 0; /* Header + Navigation + 30px oben, Footer + 20px unten, l & r = 0 */
}

#container-footer {
	position: absolute; /* Und wieder */
	bottom: 0; /* Ganz unten ankleben */
	left: 0;
	z-index: 90;
	width: 100%;
	height: 30px;
	background: #ff0000;
}

damit ist der "container-contents" zwar nicht wirklich 100% hoch, es sieht aber so aus

durch die relative positionierung von "container-page" wird dessen linke obere ecke zum bezugspunkt für alle absolut positionierten div-container. danach bekommt "container-contents" einen inneren oberen abstand von der höhe "container-head" zzgl. "container-navigation" zzgl. 30px und einen inneren unteren abstand von der höhe "container-footer" zzgl. 20px.

durch die absolute positionierung des "container-footer" von bottom: 0 klebt dieser immer am unteren rand. und durch die, wie eingangs erwähnte, relative positionierung von "container-page" wird dieses div als bezugspunkt für "container-footer" genutzt.

dadurch sieht es so aus, als ob "container-contents" immer 100% des verfügbaren platzes einnimmt. durch die inneren abstände dieses containers wird "container-page" bei der weiteren befüllung mit inhalten in "container-contents" nach unten größer, womit sich der footer dann ebenfalls weiter nach unten zieht.

hoffe das hilft

Wellenbrecher1963 · 02.07.2012, 14:39

Zitat:

Zitat von mindraper

mit min-height/-width angaben wird dem browser gesagt, dass das betreffende element immer mindestens die angegebene höhe haben soll. das hat allerdings nix mit dem verkleinern/vergrößern des browserfensters explizit zu tun, sondern sagt aus, dass ein element, dessen INHALT nicht zum erreichen der mindest-höhe/-breite ausreicht, mindestens die angegebenen maße haben soll.

Mein lieber mindraper,
leider muss ich Dich auch hier kritisieren, denn diese Anweisung hat schon was mit dem Browser verkleinern zu tun.

Du hast recht, dass das Objekt eine gewisse Höhe oder Breite haben muss oder soll, wenn der Inhalt kleiner ist, als die eigentliche festgelegte Höhe oder breite des DIV.

Und genau dieser Umstand wird für Webseiten oder Layouts genutzt, bei denen der sichtbare Bereich des Contents nicht verschoben werden darf, weil sonst die Positionen der DIVs durcheinander geraten.

In der Praxis werden solche Praktiken angewendet, wenn die Webseite einen linken und einen rechten Streifen beinhaltet und der Content sich in der Mitte befindet. Dann möchte man gewährleisten, dass beim Zusammenschieben des Browsers die rechte Spalte nicht unter das Content DIV rutscht und bei weiterem Schieben das Content unter die linke Spalte rutscht.

Und genau so kann man in die andere Richtung mit "max-" definieren, wie breit das Verhältnis der 3 Spalten zueinander sein darf, wenn die Webseite mal auf einem sehr großen Monitor oder Bildauflösung angesehen wird.

Gern wird diese Praktiken bei Layouts verwendet, bei denen die 3 Spalten zusätzlich auch noch immer gemeinsam auf dem Bildschirm waagerecht centriert werden sollen.

Also, wie kommst Du dann zu Deiner Aussage, dass das allerdings nichts mit dem Browserverkleinern zu tun hat? Diese Aussage kann ich jetzt echt bei Dir nicht nachvollziehen....

Aber ich lasse mich gern belehren.

So, und mit Deinen Worten gesprochen: Jetzt bist Du wieder dran....
Sorry, war nicht so gemeint. Von Haus aus bin ich eigentlich sehr pflegeleicht....
:-D

Schöne Grüße
und eine erfolgreiche Woche
Euer Sylvio

patrick_l · 02.07.2012, 14:44

Zitat:

Zitat von Wellenbrecher1963

Hey Du Oberguru!

Das soll hier ein Forum bleiben, in dem jerder Mensch mit Respekt behandelt werden sollte.

Ich hasse Kerle oder Weiber, die einen wie Dreck und von oben herab behandeln und so tun, als ob SIE die Weisheit mit Löffeln gefressen hätten.

Jetzt lass die Kirche mal im Dorf. Klar darf jeder seinen Senf dazu geben, man muss aber auch die Kritik anderer zulassen bzw. damit umgehen können. Ich sehe hier auch keinen persönlich Angriff der deinen letzten Post irgendwie rechtfertigt.

Nun zum eigentlichen Thema. Formatierung die das Layout betreffen sollten im CSS festgehalten werden. Dem Main-Bereich für deinen Content (Inhalte) darf keine feste Höhe mit gegeben werden. Sonst kann dieser nicht wie bereits erwähnt nach unten wachsen.

Grüße Patrick

Edit:

HTML-Code:

<!-- (x)HTML -->
<div class="wrap">
    <div id="header">
        <div class="inside">  <!-- Optional -->
            <div id="nav">
                <ul>
                    <li><a href="#">Punkt 1</a></li>
                    <li><a href="#">Punkt 2</a></li>
                    <li><a href="#">Punkt 3</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="main">
        <div id="content">
        </div>
        <div id="sidebar">
        </div>
        <br class="clear" />
    </div>
    <div id="footer">
        <div class="inside"> <!-- Optional -->
        </div>
    </div>
</div>

Code:

* {margin:0; padding:0; border:none;} /* CSS Reset */
.clear {clear:both;}

html {min-height: 100%;}
body {}

#wrap { width: 960px; margin: 0 auto;}/* Seitenbreite & mittig ausrichten */
#header {width: 960px; height: 200px; background: #09F;}
#nav {bla: blub;}
#main{bla: blub;}
#content {width: ??px;float: left;}
#sidebar{width: ??px;float: right;} 
#footer {bla: blub;}

Der zusätzliche Div für den Hauptcontainer (Wrapper) ist eigentlich überflüssig. Man könne einfach den body-Tag im CSS ansprechen. Oder dem Body eine ID oder Klasse verpassen.

mindraper · 02.07.2012, 22:49

@wellenbrecher:

da die TE sich nicht mehr zu wort meldet, gehe ich davon aus, dass sie mittlerweile eine lösung für ihr problem gefunden hat, ob von hier oder selbst ist irrelevant.

was ich bis dato von dir gelesen habe war m. E. nach nicht unbedingt so super wie du scheinbar denkst dass es gewesen wäre. jedem das seine.

zu meiner aussage, dass min-angaben nichts EXPLIZIT mit dem browserverkleinern/-größern zu tun haben komme ich wegen dem hier. sobald dort steht, dass min-/max-angaben etwas mit einer änderung der dimensionen des viewports zu tun haben kannst du von mir aus recht haben. bis dahin gehe ich weiter davon aus, dass es keinen expliziten zusammenhang mit der browsergröße/dimension des viewports gibt.

taschi · 03.07.2012, 07:32

Hallo=)
Also dank eurer Hilfe habe ich es endlich geschafft!
Vielen Dank für die vielen Antworten und Hilfestellungen! =)

Zitat:

Zitat von mindraper

@wellenbrecher:

da die TE sich nicht mehr zu wort meldet, gehe ich davon aus, dass sie mittlerweile eine lösung für ihr problem gefunden hat, ob von hier oder selbst ist irrelevant.

Und ich habe mich deshalb nicht gemeldet, weil ich eine Weile keine Zeit hatte, an den PC zu gehen...
Aber hier wurde mir geholfen!
Dafür habe ich mich auch gerade bedankt =)=)

Zitat:

Zitat von DerOtto

Der zusätzliche Div für den Hauptcontainer (Wrapper) ist eigentlich überflüssig. Man könne einfach den body-Tag im CSS ansprechen. Oder dem Body eine ID oder Klasse verpassen.

wirklich?
in jedem Tutorial und jedem Layout gab es immer einen Container / Wrapper...
Darum habe ich das auch so gemacht.^^
Es klang für mich sinnvoll, da das dann alles zusammenhält.

Wellenbrecher1963 · 03.07.2012, 09:16

Zitat:

Zitat von mindraper

@wellenbrecher:

zu meiner aussage, dass min-angaben nichts EXPLIZIT mit dem browserverkleinern/-größern zu tun haben .

Bitte zitiere mich richtig. Ich habe nie gesagt, dass es EXPLIZIT zu dieser Funktiuon benutzt wird oder von den Programmierern nur dafür geschaffen wurde. Also bitte lege mir keine Wörter in den Mund, die ich nicht gesagt oder geschrieben habe, oder gemeint haben solle, oder verdrehe mir die Worte nicht!!!

Meine Aussage war, dass dieses Attribut für oben beschriebene Möglichkeit gern und auch öffters von Programmierern und Webdesigner genutzt wird. Ich habe nie gesagt dass es nur ausschließlich dafür geschaffen wurde.

Sicherlich gibt es unzähliche Lösungsansätze, den Kontent so zu platzieren, dass er auch dort bleibt, wo er ist, selbst wenn der Browser horizontal oder waagerecht zusammen geschoben wird. Wenn es immer nur einen Lösungsweg gäbe, und immer nur eine Meinung gelten würde, dann müßten ja alle Webseiten gleich aussehen.

Langsam habe ich den Eindruck, dass sich das Forum auf PSD zum Klugscheißer Forum entwickelt und keiner mehr beim Kern der Sache bleibt und sich die gleichen Leute hier immer auf die Brust schlagen und profilieren müssen, um zu demonstrieren, dass SIE die Obergurus sind und die anderen Usern ja sooooo unwürdig sind...

Mann, geht ins Fernsehen. Vielleicht gibt man Euch da eine Lobby um Euer Ego zu stärken.....

Kindergarten pur hier....

mindraper · 03.07.2012, 15:38

@wellenbrecher

hör mal du pappnase, ICH hatte ursprünglich gesagt, dass es nicht explizit mit der browservergrößerung/-verkleinerung zu tun hat. in deinem ersten post hast du das nämlich so dargestellt.

dass du die sache nicht einfach auf sich beruhen lassen kannst (wie in meinem letzten post ja angedeutet, wenn auch zwischen den zeilen) beweist mir zumindest, dass DEIN ego profiliert werden muss.

das datum deiner registrierung legt für mich auch nahe, dass du noch nicht allzu lange in diesem forum aktiv bist. ob man innerhalb von ~3 wochen die entwicklung eines forums begutachten und bewerten kann bezweifle ich jetzt einfach mal.

oh, und bevor ich es vergesse: du solltest an deiner rechtschreibung arbeiten. und die syntax macht auch nicht soooo viel her. entschuldigung.

ich betrachte dieses thema jetzt einfach mal als gestorben, offensichtlich artet das ganze nämlich in einen persönlichen kleinkrieg aus und ich hab keine zeit für so'n kabbes.

29.06.2012, 22:34	#6
mindraper me[code].Java(Script) Registriert seit: 12.08.2007 Ort: Zuhause Beiträge: 188 Verwendet: Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil	hi, zwischenfrage: wieso ist es wichtig, dass sich der "main"-container bis zum boden erstreckt? normalerweise wird er ja durch den inhalt nach unten gedrückt. gruß __________________ Nichts ist so gerecht verteilt wie der Verstand. Jeder denkt, er hätte genug. Geändert von mindraper (29.06.2012 um 22:38 Uhr).

02.07.2012, 22:49	#12
mindraper me[code].Java(Script) Registriert seit: 12.08.2007 Ort: Zuhause Beiträge: 188 Verwendet: Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil	@wellenbrecher: da die TE sich nicht mehr zu wort meldet, gehe ich davon aus, dass sie mittlerweile eine lösung für ihr problem gefunden hat, ob von hier oder selbst ist irrelevant. was ich bis dato von dir gelesen habe war m. E. nach nicht unbedingt so super wie du scheinbar denkst dass es gewesen wäre. jedem das seine. zu meiner aussage, dass min-angaben nichts EXPLIZIT mit dem browserverkleinern/-größern zu tun haben komme ich wegen dem hier. sobald dort steht, dass min-/max-angaben etwas mit einer änderung der dimensionen des viewports zu tun haben kannst du von mir aus recht haben. bis dahin gehe ich weiter davon aus, dass es keinen expliziten zusammenhang mit der browsergröße/dimension des viewports gibt. __________________ Nichts ist so gerecht verteilt wie der Verstand. Jeder denkt, er hätte genug.

03.07.2012, 15:38	#15
mindraper me[code].Java(Script) Registriert seit: 12.08.2007 Ort: Zuhause Beiträge: 188 Verwendet: Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil	@wellenbrecher hör mal du pappnase, ICH hatte ursprünglich gesagt, dass es nicht explizit mit der browservergrößerung/-verkleinerung zu tun hat. in deinem ersten post hast du das nämlich so dargestellt. dass du die sache nicht einfach auf sich beruhen lassen kannst (wie in meinem letzten post ja angedeutet, wenn auch zwischen den zeilen) beweist mir zumindest, dass DEIN ego profiliert werden muss. das datum deiner registrierung legt für mich auch nahe, dass du noch nicht allzu lange in diesem forum aktiv bist. ob man innerhalb von ~3 wochen die entwicklung eines forums begutachten und bewerten kann bezweifle ich jetzt einfach mal. oh, und bevor ich es vergesse: du solltest an deiner rechtschreibung arbeiten. und die syntax macht auch nicht soooo viel her. entschuldigung. ich betrachte dieses thema jetzt einfach mal als gestorben, offensichtlich artet das ganze nämlich in einen persönlichen kleinkrieg aus und ich hab keine zeit für so'n kabbes. __________________ Nichts ist so gerecht verteilt wie der Verstand. Jeder denkt, er hätte genug.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS-Layoutvorlage in DW CS3, div-Höhe an maincontent anpassen	claudine_	(X)HTML & CSS	4	06.12.2010 16:04
SpryTabbedPanels, div der höhe der inhalte anpassen	marcmaroc	(X)HTML & CSS	1	16.06.2010 11:10
Div Höhe automatisch anpassen (100%)	irontom100	(X)HTML & CSS	5	08.06.2010 00:05
iFrame-Höhe an Inhalt anpassen	MyBad	PHP und andere Scriptsprachen	0	09.11.2009 15:35
CSS Div höhe an content anpassen + äüö richtig darstellen	Philopin	PHP und andere Scriptsprachen	16	11.06.2007 00:18

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Die Div an die Höhe der Div anpassen

Reklame

Anzeige

Aktuelles Commag

Anzeige

Anzeige

28.06.2012, 14:30	#2
Mackymesser111 mensch Registriert seit: 01.09.2009 Beiträge: 313 Kamera: 60D Verwendet: CS6, C4D	ich verstehe irgendwie dein anliegen nicht ganz, korrigiere mich wenn ich Stuss schreib. du hast also einen header, ein Menü und einen footer mit festgelegter höhe. Dein Main Bereich geht unter dem Menü los und endet am unteren ende des Bildschirmes (heigh:100%) und dein footer startet nach dem text "MAIN BEREICH" und liegt über dem div des Main Bereichs. Wenn du willst das dein Main Bereich, als der div in dem deine Inhalte landen, flexible bleibt solltest du KEINE höhe festlegen. Füll doch mal in deinen "Main Bereich div" text rein. Ich denke das sollte deinem Problem Abhilfe schaffen.

28.06.2012, 14:59	#4
owieortho Helper Registriert seit: 25.06.2010 Ort: 9.8241,51.3515 Beiträge: 389 Kamera: Casio EX-FH20 Verwendet: HomeSite	Ist der "sticky footer" das, was Du erreichen möchtest?

30.06.2012, 18:35	#7
Samuelll Helper Registriert seit: 02.02.2009 Ort: Hannover Beiträge: 739 Verwendet: PSCS5, Typo3, Joomla, Contao	Die Breite des Footers ist für den Fall "Sticky Footer" egal. Das kann man begrenzen. Wenn es nur darum geht, dass es aussieht, als sei der Main so hoch wie die Seite, kannst Du den betreffenden Hintergrund dem wrapper zuweisen. So hat man visuell den Eindruck als reicht der Mail bis zum Boden, auch wenn er vorher aufhört.

30.06.2012, 18:47	#8
Wellenbrecher1963 Helper Registriert seit: 13.06.2012 Ort: Freiberg Beiträge: 252 Kamera: iPhone 4s, Canon XL1, Canon EOS, FujiFilm Compact Verwendet: Adobe Suite CS5 (FL, FB, FC, PS, DW, PR, AE), Final Cut Studio, Shake4, Reason3	mach mal im CSS bei html und body height:100% rein. Dann versteht der Browser, dass er nicht nur die gesamte Breite, sondern auch die gesamte Höhe des Browsers nutzen soll. Eventuell hilft vielleicht auch das Height:100% mal bei HTML oder bei BODY rein zu machen. Hier musst Du einfach probieren. Der Grund ist folgender, einige Browser haben regelrechte Verständigungsprobleme oder einfach gesticktes Denken. Wenn Du ein DIV außen definierst, was keine Höhe hat, denken manche Browser, dass die aktuelle Ausfüllung (z.B. mit Text) die eigentlichen 100% sind. Wenn das darin liegende DIV dann eine height:100% verpasst bekommt, sieht der Browser die 100% der Ausfüllung des äußeren DIVS an. Anders, wenn Du dem ganz außen liegenden Objekt mitteilst: bitte sei DU 100%, dann macht das Objekt auch das. Bildschirmfüllend Oben, unten, links und rechts. Denn jede darin liegende Höhe richtet sich immer nach der äußeren Höhe. Mit anderen Worten, wo nix ist, kann auch nix 100% sein :-D Und mit min-height:235px; weist Du dem Objekt an, wenn der Browser zusammen geschoben wird, nur bis zu diesem Wert zusammen geschoben zu werden. Das funzt auch bei min-width:1024px; Anders herum kannst Du natürlich auch die andere Richtung mit max-height und max-width definieren. So kann man recht anspruchsvolle flexieble Layouts gestalten. sonnige Grüße Sylvio

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Die Div an die Höhe der Div anpassen

Reklame

Anzeige

Aktuelles Commag

Anzeige

Social Media

Anzeige