css, div, height, 100% -problem

2010-09-28 23:24

Permalänk

dubalizer

Medlem

Plats: Sverige
Registrerad: Nov 2002

●

css, div, height, 100% -problem

Hej!

Har försökt i flera dagar nu utan att lyckats.
Finns det någon här inne som har en lösning för hur jag ska kunna designa följande layout med CSS + html/xhtml

Modellen måste fungera felfritt i IE + FF + Safari.
Jag vill helst lösa det hela utan att behöva blanda in javascript.

En enkel förklaring till min layout finns på länken nedan;
http://img153.imageshack.us/img153/7979/divproblem2.gif

Tack på förhand!

Visa signatur

Intel C2D E6400 @ 2.13GHz || Zalman CNPS9500LED • Gigabyte GA-965P-DS3 v.3 || Corsair TWIN2X 6400 DDR2 2x1GB || PowerColor Radeon X1900XT 256MB GDDR3 || Hiper Type-M 580W 18dB || Seagate Barracuda 7200.10 320GB SATA2 16MB 7200RPM

Rapportera Redigera

Citera flera Citera

2010-09-29 02:38

Permalänk

Meat

Medlem

Registrerad: Dec 2004

●

I all hast, du kan ju själv testa i olika webbläsare.

<!DOCTYPE html>

<html lang="sv">
<head>
<style type="text/css">
<!--
html,body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-color: #ffffcc;
	overflow: hidden;
	max-height: 100%;
	position: relative;
	text-align: center;
}

* html body { /*IE6 hack*/
	padding: 300px 0 200px 0px;
}

* html div#div4 { 
height: 100%; 
width: 100%; 
}

#div1 {	margin: 0px auto 0px auto; 
	padding: 0;
	width: 640px;

	height: auto !important; /* real browsers */
	height: 100%; /* IE6: treaded as min-height*/
	min-height: 100%; /* real browsers */

	background-color: #cc99ff;	
}

	
#div2 {	height: 140px;
	width: 500px;

	position: fixed;
	top: 0;
	margin-left: 70px;

	background-color: #99ccff;
	}	

#div3 {	background-color: #0066ff;
	top: 140px;
	bottom: 200px;
	width: 500px;
	position: absolute;
	overflow: auto;
	margin-left: 70px;
}

#div4 {	width: 500px;
	height: 200px;
	z-index: 2;
	position: absolute;
	top: auto;
	bottom: 0px;
	background-color: #33ff66;
	margin-left: 70px;
	}

#div5 { 	float: right;
	clear: right;
	width: 70px;
	background-color: #ff3333;
}

#div6 { 	float: right;
	clear: right;
	width: 70px;
	background-color: #cc0000;
}
-->
</style>
</head>
<body>
<div id="div1">
<div id="div2"> </div>
<div id="div3"> </div>
<div id="div4"> </div>
<div id="div5"> </div>
<div id="div6"> </div>
</div>
</body>
</html>

Rapportera Redigera

Citera flera Citera

2011-07-24 05:00

Permalänk

joeghurt

Medlem

Plats: Stockholm
Registrerad: Okt 2007

●

Lånar denna gamla tråd. Försöker med samma sak och det funkar för sidor med kort innehåll, men när det blir längre innehåll så kapar den. Jag antar att ni använder Firebug så html <style> och CSS går att granska. Länk raderad pga sekretess.

Innehållet på hemsidan kan ni ju kolla om ni vill men det är i princip bara "lorem ipsum" tills jag kommit på nåt vettigt innehåll.

Helst vill jag att div site ska gå nästan längst ner och sen under den i det grå ska det stå nån copyrightgrej centrerad. Kan någon hjälpa mig med det?

Senast redigerat 2011-07-28 23:15 sekretess

Visa signatur

MacBook Pro 15" i5 520M 8GB GT330M 750GB

Rapportera Redigera

Citera flera Citera

2011-07-24 11:54

Permalänk

anon150287

Inaktiv

Registrerad: Apr 2010

●

Du har ju max-height: 100% och overflow: hidden; så det är klart att det överflödiga försvinner.
Förstår inte varför du behöver det då du antagligen kommer ha så pass mycket info på varje sida att den sträcker sig ända ner, och om den inte gör det är det väl inte hela världen?

Senast redigerat 2011-07-24 12:36

Rapportera Redigera

Citera flera Citera

2011-07-24 17:19

Permalänk

joeghurt

Medlem