CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

hansimand2 Nybegynder

24. september 2011 - 00:57 Der er 8 kommentarer

footer i bunden af siden..

Hej alle...

Mit problem er min footer...

Jeg har leget lidt frem og tilbage.. Jeg kan godt få den til at være i bunden af siden lige meget hvor meget indhold der er på siden og hvilken størrelse skærm den bliver vist på..

Men der kommer en scroll jeg meget gerne vil af med når der ikke er nogen grund til at den er der..

http://sccups.com/

Synes godt om

claes57 Ekspert

24. september 2011 - 09:29 #1

jeg har tidligere set denne kode - som ved smalle sider laver en kolonne med top/midt/bund (det er den, du skal tjekke).
Det er noget med at siden skal finde sin størrelse først og så genvises - og det virker.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="Content-language" CONTENT="dan">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<title>HTML</title>
<style type="text/css">
html {width:100%;height:100%;}
body {width:100%;height:100%; margin:0; padding:0; overflow:auto;}
</style>
<script>
window.onresize=function(){reFit()}
function reFit()
{
if (document.body.clientWidth > 899)
{
document.getElementById("bl").style.position = "absolute"
document.getElementById("bl").style.width = "300px"
document.getElementById("bl").style.height = ""
document.getElementById("bl").style.minHeight = "100%"

document.getElementById("bc").style.position = "absolute"
document.getElementById("bc").style.left = "300px"
document.getElementById("bc").style.right = "300px"
document.getElementById("bc").style.width = ""
document.getElementById("bc").style.height = ""
document.getElementById("bc").style.minHeight = "100%"

document.getElementById("br").style.position = "absolute"
document.getElementById("br").style.right = "0px"
document.getElementById("br").style.width = "300px"
document.getElementById("br").style.height = ""
document.getElementById("br").style.minHeight = "100%"

var h = Math.max(document.getElementById("bl").offsetHeight
,document.getElementById("bc").offsetHeight
,document.getElementById("br").offsetHeight)
document.getElementById("bl").style.height = h+"px"
document.getElementById("bc").style.height = h+"px"
document.getElementById("br").style.height = h+"px"
}
else
{
document.getElementById("bl").style.position = "static"
document.getElementById("bl").style.width = "100%"
document.getElementById("bl").style.minHeight = ""
document.getElementById("bl").style.height = ""

document.getElementById("bc").style.position = "static"
document.getElementById("bc").style.width = "100%"
document.getElementById("bc").style.minHeight = ""
document.getElementById("bc").style.height = ""

document.getElementById("br").style.position = "static"
document.getElementById("br").style.width = "100%"
document.getElementById("br").style.minHeight = ""
document.getElementById("br").style.height = ""

setTimeout(function() // kender ikke footer/headers offsetHeight før rendering, vent 10 tix
{
var h = document.body.clientHeight
- document.getElementById("bl").offsetHeight
- document.getElementById("br").offsetHeight
if (h > 0)
document.getElementById("bc").style.minHeight = h+"px"
}
,10)
}
}

</script>
</head>
<body onload="reFit();document.getElementById('splash').style.display='none'" bgcolor="#000000">

<div id="splash" style="position:fixed; top:0px;left:0px;right:0px;bottom:0px; z-index:2; background-color:#FEB;">
Liige et øjeblik...
</div>

<div id="bl" style="background-color:#6C6; position:absolute; left: 0px; top:0px; text-align:center;">
Venstre eller header
</div>

<div id="bc" style="background-color:#FEB; position:absolute; left: 0px; top:0px; text-align:center;">
Midt
<table border="3" height="400px" width="200px" align="center"><tr><td>fyld</td></tr></table>
</div>

<div id="br" style="background-color:#C66; position:absolute; right:0px; top:0px; text-align:center;">
Højre<br>eller<br>footer
</div>

</body>
</html>

Synes godt om

olebole Juniormester

24. september 2011 - 14:28 #2

<ole>

Du kan også bare gøre det med CSS:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>100% højde med header og footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html,body {
    margin: 0;
    padding: 0;
    height: 100%;
    font: 90% verdana, sans-serif;
}
#wrapper {
    position: relative;
    margin: 0 auto;
    width: 700px;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}
#header {
    height: 90px;
    background: red;
}
#content {
    padding: 12px 24px 60px;
}
#footer {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    background: green;
}
</style>
</head>
<body>

<div id="wrapper">
    <div id="header">
    Header
    </div>
    
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo tellus, hendrerit vel ultricies a,
            gravida aliquet velit. Cras et sapien nec lacus bibendum cursus vitae non sapien. Vivamus ut sollicitudin metus.
            Etiam accumsan auctor erat, sit amet semper sem sollicitudin vitae. Sed et sem nec elit mollis volutpat.
            Maecenas felis erat, auctor eu placerat et, commodo sit amet erat. Suspendisse a consequat libero.
            Nullam quis neque dictum dui consequat ullamcorper.</p>
         
        <p>Fusce dignissim lacus ut purus aliquet condimentum interdum metus euismod. Suspendisse turpis turpis,
            fermentum sit amet pharetra eget, placerat at dolor. Etiam lectus nulla, scelerisque imperdiet pretium nec,
            tincidunt at felis. Phasellus sodales tristique tristique. Cras vel lacus elit. Suspendisse a lacus erat,
            id vulputate elit. Maecenas dapibus, purus eget molestie sodales, tellus sem fringilla sem, sed aliquet
            libero mi vitae lacus. Nulla dignissim venenatis dui, at porta tortor dictum at. Aliquam id lectus magna,
            sit amet elementum nulla. In molestie lacinia scelerisque. Etiam rutrum, velit vitae fringilla elementum,
            augue sapien pellentesque velit, sit amet pulvinar ante nisi in nisl. Nunc ornare fringilla ligula,
            eu eleifend purus tincidunt a. Aliquam sed sapien elit, a iaculis justo. Aenean non leo dui, eget malesuada augue.</p>
         
        <p>Donec nec leo lectus. Praesent sit amet libero elit, vel imperdiet turpis. Pellentesque habitant morbi tristique
            senectus et netus et malesuada fames ac turpis egestas. Morbi mauris tellus, facilisis non ultrices ac,
            dapibus et tellus. Vestibulum tristique iaculis iaculis. Morbi sit amet volutpat enim. Proin pulvinar sodales tristique.
            Proin libero tortor, rhoncus gravida faucibus sit amet, facilisis sit amet neque. Praesent accumsan ligula et justo
            mollis non interdum enim vehicula. Ut urna turpis, tincidunt a pharetra non, molestie vel leo. Pellentesque habitant
            morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nec suscipit est. Duis sed dolor
            quis lacus fringilla elementum eget vitae dui.</p>
    </div>
    
    <div id="footer">
    Footer
    </div>
</div>

</body>
</html>

/mvh
</bole>

Synes godt om

hansimand2 Nybegynder

25. september 2011 - 23:47 #3

hej olebole..

Jeg kan se at din kode virker fint.
Men jeg kan bare ikke se hvad det er jeg laver forkert på min side..

Når jeg sætter det der ind i min kode bliver footer bare stående 100% af skærmstørrelsen.

Hvad gør jeg galt?

Synes godt om

hansimand2 Nybegynder

25. september 2011 - 23:56 #4

Jeg kan godt se at du selvfølgelig har footer inde i din wrapper.. Men jeg vil jo gerne have at min footer er 100% af skærmopløsningen. Derfor er det jo lidt et problem.

Synes godt om

olebole Juniormester

26. september 2011 - 00:10 #5

Så lav wrapperen 100% bred og læg footeren derind. Derefter kan du oprette en indre wrapper, du gør smallere og giver margin:auto i siderne. I den indre wrapper lægger du så resten af dit indhold

Synes godt om

hansimand2 Nybegynder

26. september 2011 - 09:32 #6

okay. Det var også det jeg tænkte på at gøre.
troede bare at der var en lidt nemmere måde :D

tak for hurtige svar..

Synes godt om

hansimand2 Nybegynder

26. september 2011 - 09:36 #7

hvordan giver jeg point til dig? jeg kan kun give til mig selv? :S

Synes godt om

majbom Novice

26. september 2011 - 12:10 #8

du venter på at ole ligger et svar, hvilket han nok ikke gør, da han ikke samler på point - så accepter du bare et af dine egne svar :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS