webForumDet fria alternativet
Logga in / Bli medlem

En gång för alla: DIV som täcker hela sidan

HTML & CSS

7 svar · 667 visningar · startad av learn

learnMedlem sedan jan. 20051 130 inlägg
Frågan#1

Jag vill att en DIV ska ligga över allt innehåll och den ska sträcka sig över hela sidan, oavsett scrollning, alltså hela sidans bredd och höjd. Gärna så det fungerar i "alla" browsers (dvs även ngt fulhack för IE...).

En gång för alla, ge mig en lösning på mitt problem, tackar ödmjukast! :)

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#2

Eftersom jag inte gillar div som hoppar runt när man scrollar, skapade jag en annan lösning! (Vem har sagt att man absolut måste använda position: fixed? :) ) Jag tog bort scrollen för body, och skapade två div'ar, den ena funkar som en fake-body med scroll, den andra täcker upp. Så koden blir som följer:

<html>
<head>

<style type="text/css">
html,body{
	border: none;
	overflow: hidden;
}

#fakebody{
	overflow: auto;
}

#coverup{
	background: green;
	visibility: hidden;
	z-index: 20;
}

.cover{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	width: expression(document.body.offsetWidth + "px");
	/* Fulhack för att få bort mellanrummet till höger på sidan. */

}
</style>
</head>
<body scroll="no">

<div id="coverup" class="cover" onclick="this.style.visibility='hidden';">
<h2>Jag täcker!</h2>

Klicka för att komma tillbaka!
</div>

<div id="fakebody" class="cover">

<a href="javascript:;;" onclick="document.getElementById('coverup').style.visibility='visible';">Täck!</a>

<p>
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
</p>

<p>
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
</p>

<p>
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
</p>

<p>
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
</p>

<p>
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
</p>

</div>

</body>
</html>

Koden är testad och funkar i IE6, FF 1.5 och Opera 9 beta.

learnMedlem sedan jan. 20051 130 inlägg
#3

Tackar så mkt för ditt tips nitro2k01! Men det känns lite, hmm jag vet inte... konstigt att behöva "ta bort" den riktiga body-taggen och ersätta den med en fake-body... Vet inte, kanske är en bra lösning, den funkar ju iaf... Hmm. Någon som ngt annat förslag?

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#4

Du tar inte bort den, du bara sätter en div-tagg runt dtt nuvarande body-innehåll. Jag får nog förvarna att det inte blir bättre än så där!

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#5

Om du absolut inte vill använda metodenovan finns denna, som funkar sämre i IE, något du får stå ut med isf...

<html>
<head>

<style type="text/css">
html,body{
	border: none;
	overflow: auto;
}

#coverup{
	background: green;
	visibility: hidden;
	z-index: 20;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	width: expression(document.body.offsetWidth-20 + "px");
	/* Fulhack för att få bort mellanrummet till höger på sidan. */

}

</style>
<!--[if IE]>
<style type="text/css">
#coverup{position: absolute!important;}
</style>
<script>

window.onload=function(){
	document.body.onscroll=function(){
		document.getElementById("coverup").style.top=document.body.scrollTop+"px";
	}
}

</script>

<![endif]-->
</head>
<body>

<div id="coverup" onclick="this.style.visibility='hidden';">
<h2>Jag täcker!</h2>

Klicka för att komma tillbaka!
</div>

<a href="javascript:;;" onclick="document.getElementById('coverup').style.visibility='visible';">Täck!</a>

<p>
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
</p>

<p>
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
</p>

<p>
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
</p>

<p>
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
</p>

<p>
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
dgndfngdf hndfng djg dgykfyuk tuik ryku rduk ryuj ruk rfyuk ruyk ryuk rykutyfuk tyku rfyukru
</p>

</body>
</html>
learnMedlem sedan jan. 20051 130 inlägg
#6

nitro2k01 skrev:

Du tar inte bort den, du bara sätter en div-tagg runt dtt nuvarande body-innehåll. Jag får nog förvarna att det inte blir bättre än så där!

Ok, ska kika närmare på det. Men att få en div att sträcka sig över hela sidan måste väl gå att fixa på ngt annat sätt också. Problemet ligger väl egentligen bara i att få DIV:en 100% height... eller?

Nu känner jag mig lite klyven.

R: Du hann tydligen posta igen :) Nej tack, inga javascript för detta tack :)

bossseMedlem sedan juni 2003771 inlägg
#7
<html>
<head>
<title></title>
<style type="text/css">
<!--
html, body {margin:3px}
div
{
width:100%;
height:100%;
background-color:green; 
border:2px solid black;
}
-->
</style>
</head> 
<body>
<div>
Centrerad div <br>
Ta bara bort html, body {margin:3px} så slickar den kanterna
</div>
</body>
</html>
learnMedlem sedan jan. 20051 130 inlägg
#8

bossse, din DIV lägger sig inte ovanpå eventuellt sidinnehåll. Det är ju liksom det som är problemet.

263 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
119 ms — deklarationer (db)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)
130 ms — ändringar (db)