Forum Mjukvara Programmering och digitalt skapande Tråd

Webdesign: fylla hela sidans höjd med CSS

1
Skriv svar
Permalänk
Medlem
●

Webdesign: fylla hela sidans höjd med CSS

Jag har alldeles nyligen börjat lära mig CSS. Har suttit och kikat på guider och dylikt men inte riktigt fått till det som jag vill ha det.

Som det är nu så består sidan av fyra div-taggar. Dels en "border_box" som omsluter allting och innehåller en bakgrundsbild. Inuti denna har jag en "header", en "content" samt en "footer". Jag har lyckats få till det så att footer alltid är längst ned på sidan, oavsett hur stort webbläsarfönster man har.

Problemet uppkommer då jag gärna vill att färgen från content skall följa med hela vägen ned till footer. Återigen oavsett hur stort fönster man har.

Bild 1 visar hur jag har just nu, bild 2 visar hur jag skulle vilja få till det. Någon som har några förslag?

En annan liten fundering jag har också: Om man presenterar en bild och själv bestämmer width och height. Kommer då webbläsaren ändå vara tvungen att ladda ned hela bilden när det gäller datamängden?

Bild1:

Bild2:

Koden ser ut såhär:

CSS:

body
	{
	background-image:url(img/background3.jpg);
	font-family:Arial, Verdana, sans-serif;
	font-size:100%;
	height:100%;
	}
	
html
	{
	height:100%
	}
	
* 	
	{
	margin:0;
	}

/*-----------ID-----------*/
#border_box
	{
	width:50em;
	border:0px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0;
	padding:0px;
	background-image:url(img/border9.png);
	min-height:100%;
	height:100%;
	position: relative;
	}
	
#content
	{
	margin-left:3.5em;
	margin-right:3.5em;
	border-bottom:5px;
	padding:0.5em;
	padding-bottom:60px;
	border:0px;
	padding-left:5px;
	border-style:solid;
	background-color:lightgreen;
	}
	
#header
	{
	padding:0em;
	height:10em;
	border:0em;
	margin:0em;
	margin-left:3.5em;
	margin-right:3.5em;
	color:white;
	background-color:black;
	clear:left;
	}
	
#footer
	{
	position:absolute;
	margin-left:3.5em;
	margin-right:3.5em;
	height:60px;
	bottom:0;
	width:42em;
	padding:0.5em;
	color:red;
	background-color:darkred;
	clear:left;
	}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<meta http-equiv="Content-Language" content="sv" />
		
		<title>
			test
		</title>
		
		<link href="style.css" rel="stylesheet" type="text/css" />
		
	</head>
	<body>
		<div id="border_box">
			<div id="header">
				<a class="title" href="index.html">test</a>
				<img src="img/header.jpg" alt="Header test" />
			</div>
			
			<div id="content">
				<p>Test</p>
				<br>
				Test igen
				
				<div class="rubrik">
				Detta är en rubrikruta
				</div>
			</div>
			
			<div id="footer">
				Footer
			</div>			
		</div>
	</body>
</html>

Hoppas någon förstår hur jag menar :).

//Emil

Redigera
Citera flera Citera
Permalänk
Medlem
●

Satte ihop en snabb variant åt dig:

<!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>Strechystrechy</title>
<style>
html, body {
    height:100%;
}
body {
	margin:0;
	padding:0;
}
#wrapper {
	width:960px;
	margin:0 auto;
	height:100%;
	margin-top:-100px;
}
#header {
	float:left;
	width:960px;
	height:100px;
	background-color:#9CC;
	margin-top:100px;
}
#content {
	width:960px;
	height:auto;
	min-height:100%;
	background-color:#FFC;
}
* html #content {
	height:100%;
}
#footer {
	height:100px;
	background-color:#CC9;
}
</style>
</head>

<body>
	<div id="wrapper">
		<div id="header"> </div>
		<div id="content"> </div>
		<div id="footer"> </div>
	</div>
</body>
</html>
Senast redigerat
Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tackar, fungerade kanon när jag körde ditt exempel enbart.

Blev däremot lite knas när jag försökte implementera din kod i min kod men det löser jag nog.

En annan fråga: Om jag vill publicera en bild som en thumbnail (man klickar på den så kommer orginalbilden upp). Är det då bättre att själv skapa en bild som är förminskad och använda som thumbnail eller går det lika bra att använda orginalbilden men ändra width och height med kod? Om jag använder det senare exemplet, måste då webläsaren ändå läsa in hela bilden då sidan laddas?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av wolfpine:

Är det då bättre att själv skapa en bild som är förminskad och använda som thumbnail eller går det lika bra att använda orginalbilden men ändra width och height med kod? ]Om jag använder det senare exemplet, måste då webläsaren ändå läsa in hela bilden då sidan laddas?

Gå till inlägget

Det är bättre att skapa anpassade tumnaglar, eftersom webbläsaren annars måste ta hem den större bilden för att sedan kunna förminska den, vilket för övrigt ger ett något suddigare resultat än en bild anpassad till rätt storlek.

Visa signatur

På SoundCloud | Fästmöns galleri

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ok, då kör jag med egna tumnaglar.

En fråga till angående kodförslaget jag fick. När jag provade på min egen och fixade till så jag blev nöjd så uppkom ett annat problem.

I förslaget används en box #wrapper som ska omge alla de andra tre div-taggarna. Hur gör man för att få denna wrapper att gå ner hela vägen på sidan. Alltså, om jag t.ex. ändrar så att footer inte är exakt lika bred som content och wrapper så ser man inte wrappers bakgrundsfärg hela vägen ned, den slutar där footer börjar.

Det fungerar ju på header, försökte göra någon liknande lösning på footer men får inte till det.

Något förslag?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Efter lite fixande och trixande kom jag fram till att det löste sig om man lade till en padding-bottom på den yttersta boxen. Tackar för hjälpen!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Blir inte klok på detta. Min lösning fungerade bara så länge jag inte fyllde min content-box med innehåll. Så fort den blev för stor så att webläsaren var tvungen att ta fram en rullist så ser det konstigt ut igen. Då följer inte bakgrundsbilden med hela vägen ned.

Nån bra idé?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Nu är jag inte riktigt säker på hur du menar, och inte själv så värst bra på css och html.
Men prova lägga in

background-attachment: fixed;

efter bakgrundsbilden, på en ny rad.
Det gör att bakgrundsbilden sitter "fast" och inte följer med när man scrollar neråt.

Visa signatur

Flickr

Redigera
Citera flera Citera
Permalänk
Medlem
●

Nej, det är inte exakt så ja menar. Jag försökte använda save's variant och få till den på sådant sätt som jag ville men det blir bara fel. Jag vill ha precis som save, fast bakom hans #wrapper skall det finnas en bakgrundsbild (det bruna som tonar ut i bilden i första posten).

Med koden nedan har jag bara modifierat save's kod lite grand. Det blir ungefär som jag önskar. Problemet uppkommer då jag inte fyller sidans höjd med innehåll. Då åker footer upp och hamnar precis där innehållet i wrapper slutar. Om man å andra sidan fyller hela höjden så flyter footer så vackert ned nedanför och man kan scrolla osv. precis som jag vill.

Ett andra problem som uppkommer är då man zoomar ut i sidan med hjälp av CTRL+scroll vilket gör att footer inte längre följer botten på sidan.

Jag har provat att sätta #footer {position:absolute} vilket gör att den sitter längst ned, dock fylls inte den blå bakgrundsfärgen hela vägen ned. Om man då dessutom fyller sidan med för mycket innehåll så kommer inte footer glida så lugnt nedanför. Detta är alltså ingen vettig lösning.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<meta http-equiv="Content-Language" content="sv" />
		<title>TEST4</title>
	</head>
	
	<style>
		html, body {
			height:100%
			}
			
		body {
			margin:0;
			padding:0;
			}
		
		#background {
			width:800px;
			margin:0 auto;
			height:auto;
			min-height:100%;
			background-color:forestgreen;
			}
			
		#wrapper {
			width:700px;
			margin:0 auto;
			min-height:100%;
			background-color:lightblue;
			}
			
		* html #wrapper {
			height:100%;
			}
			
		#header {
			width:700px;
			margin:0 auto;
			height:100px;
			background-color:yellow;
			}
			
		#footer {
			position:relative;
			bottom:0;
			width:700px;
			margin:0 auto;
			height:70px;
			background-color:red;
			}
	</style>
	
	<body bgcolor="lightgreen">
		<div id="background">
			<div id="wrapper">
				<div id="header">
					Header
				</div>
				Wrapper<br><br>
				En massa text<br>En massa text<br>En massa text<br>
				En massa text<br>En massa text<br>En massa text<br>
				En massa text<br>En massa text<br>En massa text<br>
				En massa text<br>En massa text<br>En massa text<br>
				En massa text<br>En massa text<br>En massa text<br>
				En massa text<br>En massa text<br>En massa text<br>
				En massa text<br>En massa text<br>En massa text<br>
				En massa text<br>En massa text<br>En massa text<br>
				En massa text<br>En massa text<br>En massa text<br>
				Slut på texten<br><br>Slut på texten
				<div id="footer">
					Footer
				</div>
			</div>
		</div>
	</body>
	
</html>

Någon som förstår vad jag menar eller vet var jag kan läsa om hur man får till detta. Har försökt olika CSS-guider men de förklarar bara vad typ padding, border, margin etc. gör för något. Inget om huruvida man skall få något att vara på den plats man vill ha det :S

Redigera
Citera flera Citera
Permalänk
Medlem
●

Detta är en annan variant som i princip är en direkt kopia av save. Har endast lagt till en #back som jag vill ha som bakgrund och omsluter allting. Problemet med denna kod är att bakgrunden slutar efter en viss längd. Jag vill att den skall fylla hela sidan.

<!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>TEST2</title>
<style>
html, body {
    height:100%;
}
body {
	background-color:grey;
	margin:0;
	padding:0;
}

#back {
	width:1100px;
	margin:0 auto;
	padding:0;
	border:0;
	background-color:green;
	height:auto;
	height:100%;
	min-height:100%;
	}

#wrapper {
	width:960px;
	margin:0 auto;
	height:100%;
	margin-top:-100px;
}
#header {
	float:left;
	width:960px;
	height:100px;
	background-color:#9CC;
	margin-top:100px;
}
#content {
	width:960px;
	height:auto;
	min-height:100%;
	background-color:#FFC;
}
* html #content {
	height:100%;
}
#footer {
	height:100px;
	background-color:#CC9;
}
</style>
</head>

<body>
<div id="back">
	<div id="wrapper">
		<div id="header">Header</div>
		<div id="content">Content
		Massa text<br>Massa text<br>Massa text<br>Massa text<br>
		Massa text<br>Massa text<br>Massa text<br>Massa text<br>
		Massa text<br>Massa text<br>Massa text<br>Massa text<br>
		Massa text<br>Massa text<br>Massa text<br>Massa text<br>
		Massa text<br>Massa text<br>Massa text<br>Massa text<br>
		Massa text<br>Massa text<br>Massa text<br>Massa text<br>
		Massa text<br>Massa text<br>Massa text<br>Massa text<br>
		Massa text<br>Massa text<br>Massa text<br>Massa text<br>
		Massa text<br>Massa text<br>Massa text<br>Massa text<br>
		Slut på text
		</div>
		<div id="footer">Footer</div>
	</div>
</div>
</body>
</html>
Redigera
Citera flera Citera
Permalänk
Medlem
●

Ah var inte med på att du ville ha en div som extra bakgrund. Kika in den här: Basic Sticky Footer #1 så behöver vi inte återuppfinna hjulet.

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

Den där sidan verkar se ut ganska precis som jag vill ha det. Skall undersöka koden närmare när jag har tid.

Tackar för detta!

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara