ugrás a tartalomhoz

DIV height 100% megint

Blintux · 2009. Okt. 10. (Szo), 10.36
Sziasztok!

Az alabbi peldaban a container elnevezesu DIV szepen kitolti a fuggoleges teret, tehat 100% magasagban a browsert. Viszont a content azonositoju DIV-et erre sehogy nem tudom ravenni. Ha siman 100%-ra allitom, akkor pont a bongeszo magasagat kapja, es ugye igy megjelenik a gorgeto savok, mivel a fejlec tullog az egeszen.

HTML:

<body>
	<div id="container">

		<div id="header">
			<h1>Fejlec</h1>
		</div>

		<div id="content">
			content
		</div>

		<div id="navbar">
			Navbar
		</div>
		
		<div id="footer">
			Footer
		</div>
		
	</div>

</body>
CSS:

html,body {
	margin:0;
	padding:0;
	height:100%;
	background:blue;
}

#container {
	position:relative;
	width:750px;
	background:yellow;
	height:auto;
	height:100%; 
	min-height:100%; 
}

#header {
	padding:1em;
	background:#ddd;
}


#content {
	width:200px;
	background:orange;
	position:relative;
	height:100%;
}

#footer {
	height:200px;
	width:100%;
	background:#ddd;
}
‹ Joomla <audio> és icecast ›
 ■
1

Mindig ugy jarok, ha leirom a

Blintux · 2009. Okt. 10. (Szo), 10.45
Mindig ugy jarok, ha leirom a problemat, akkor utana 5 percre rajovoka megoldasra.
Szoval mar megvan a megoldas:)
2

megoldást

solkprog · 2009. Okt. 10. (Szo), 11.08
Ilyenkor illik beírni a megoldást is, hogy később egyrészt akár hivatkozhassunk rá, másrészt ha valaki megtalálja ezt a topicot akkor ne csak a kérdést lássa.
3

Bocsanat, csak sietnem

Blintux · 2009. Okt. 10. (Szo), 11.18
Bocsanat, csak sietnem kellet, es csak azert irtam be gyorsan, hogy mas ne torje magat miattam.

Szoval a mukodo kod:

HTML:

<body>
	<div id="container">
	
		<div id="header">
			<h1>Fejlec</h1>
		</div>
		
		<div id="content">
			content 
		</div>
		
		<div id="footer">
			Footer
		</div>
		
	</div>
</body>
CSS:

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}

#container {
	position: relative;
	height: 100%;
	width: 600px;
	margin: 0 auto;
	background:red;
}

#header, #footer {
	height: 100px;
	background: #dad;
	position: absolute;
	left: 0;
	right: 0;
}

#header {
	top: 0;
}

#footer {
	bottom: 0;
}

#content {
	position: absolute;
	top: 100px;
	bottom: 100px;
	left: 0;
	right: 0;
	background: #ffc;
	overflow: auto;
}
4

Összefoglalva

Manassé · 2013. Már. 30. (Szo), 22.39
Nekem is szembejött a probléma (menüt készítettem két oldalra).
Összefoglalva a megoldást az jelentette, hogy annak az objektumnak a position értékét relative-ra, amiben a 100%-osnak kívánt objektum található. Ez megtehető természetesen a body-val is.