7 svar · 667 visningar · startad av learn
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! :)
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.
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?
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!
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>
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 :)
<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>
bossse, din DIV lägger sig inte ovanpå eventuellt sidinnehåll. Det är ju liksom det som är problemet.