Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

CSS: Behöver hjälp att få min footer att fastna på botten av sidan

1
Skriv svar
Permalänk
Avstängd
●

CSS: Behöver hjälp att få min footer att fastna på botten av sidan

Hej. Jag har gått igenom dem här.
https://css-tricks.com/couple-takes-sticky-footer/
http://ryanfait.com/sticky-footer/
Och vet ni, nej den ska upp hela tiden och jag förstår inte vad jag gör fel. Jag har försökt själv i 2 dagar samt med dem här men det funkade inte. Jag vet att man kan använda position: fixed. Men jag vill gärna använda bottom: 0; position: absolute för då är den på botten av sidan hela tiden och följer ej med när man scrollar upp. Har ni någon tanke på hur man kan lösa detta för det var en klurig nöt.

CSS
https://gist.github.com/anonymous/6b99854717e760e91c3752b05a6...

HTML
https://gist.github.com/anonymous/0673fa8754a481e83174c2ca0d7...

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

om du ska köra footern så måste du köra wrappern i position absolute eller nå sånt om jag inte missminns mig helt galet, har för mig det var nånting liknande... Längesen jag pysslade med detta nu men det kanske tar dig ett steg i rätt riktning?

Visa signatur

Citera om du vill ha svar :)

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Utan att kolla på din kod, så verkar det som att du är ute efter position: fixed. Då fastnar elementet du vill ha fastklistrat, på den angivna positionen, oavsett hur mycket du skrollar.

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Redigera
Citera flera Citera
Permalänk
Avstängd
●

@Airikr: Ja men alltså den följer ju med om man scrollar upp. Tänk dig att du scrollar ner på sidan och kommer till botten då ska du inte se footern förens du är helt på botten. Den ska inte följa med när man scrollar, förstår du hur jag menar?

@pellski87: Ska testa detta.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

det kanske var relative du ska köra på wrappern sen absolute och bottom: 0 på footern kommer inte riktigt ihåg men prova det

Visa signatur

Citera om du vill ha svar :)

Redigera
Citera flera Citera
Permalänk
Avstängd
●

@pellski87: Provade det och lite mer som jag själv kom på men nope den vägrar.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Ikasera:

@edgren: Ja men alltså den följer ju med om man scrollar upp. Tänk dig att du scrollar ner på sidan och kommer till botten då ska du inte se footern förens du är helt på botten. Den ska inte följa med när man scrollar, förstår du hur jag menar?

Gå till inlägget

Använd dig i sådana fall av följande CSS-snutt:

.element {
    left: 0;
    bottom: 0;
    padding: 30px 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

Den CSS-snutten lägger ditt element längst ner på webbsidan. För att inte gömma innehållet, kan du lägga till margin-bottom: 150px; eller hur stort mellanrum du nu vill ha, i body { ... }.

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Ikasera:

@pellski87: Provade det och lite mer som jag själv kom på men nope den vägrar.

Gå till inlägget

Hittade detta efter en snabb googling

A very simple approach which works great cross browser is this:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bot...

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>
CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
Visa signatur

Citera om du vill ha svar :)

Redigera
Citera flera Citera
Permalänk
Avstängd
●

@Airikr: Footer fastnar i content när man scrollar ner ett problem jag inte heller vet hur man ska lösa och som jag har försökt lösa nu i 2 dagar. Varför kan inte bara css uppfinnare skapa typ stayonthebottomforever: yes; skulle vara så mycket enklare!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Ikasera:

@edgren: Footer fastnar i content när man scrollar ner ett problem jag inte heller vet hur man ska lösa och som jag har försökt lösa nu i 2 dagar. Varför kan inte bara css uppfinnare skapa typ stayonthebottomforever: yes; skulle vara så mycket enklare!

Gå till inlägget

Jag antar att du vill ha samma footer som vad jag har?

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Redigera
Citera flera Citera
Permalänk
Avstängd
●

@Airikr: Precis den ska alltid ligga under content.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Ikasera:

@edgren: Precis den ska alltid ligga under content.

Gå till inlägget

Då behöver du ingen position över huvud taget. position: relative; är samma sak som ingen position alls. Lägg bara footer precis innan slut-taggen för body. Klart!

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Redigera
Citera flera Citera
Permalänk
Avstängd
●

@Airikr: Jag tror inte att det där är en bra ide då allt måste vara mellan body och html Det ska funka med float eller vad man nu använder någon som kan kolla över koden och testa sig fram?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Ikasera:

@edgren: Jag tror inte att det där är en bra ide då allt måste vara mellan body och html Det ska funka med float eller vad man nu använder någon som kan kolla över koden och testa sig fram?

Gå till inlägget

Öh. Va? Float? Varför?

<html>
    <head>
        <title>...</title>
    </head>
    <body>

        <header class="logo"></header>

        <nav class="main">
            Menyn...
        </nav>

        <main>
            Innehållet...
        </main>

        </footer>
            Footern...
        </footer>

    </body>
</html>

Sådär ser en typisk webbsida ut från grunden. Den koden ger dig exakt det du är ute efter.

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Redigera
Citera flera Citera
Permalänk
Avstängd
●

@Airikr: 'Ja men det är ju så jag har det!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Ikasera:

@edgren: 'Ja men det är ju så jag har det!

Gå till inlägget

Om din kod ser ut som min ovan och din footer inte kommer nedanför innehållet, så har du gjort något helt fel! Låt mig kolla igenom din kod lite snabbt, så skriver jag här igen.

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Redigera
Citera flera Citera
Permalänk
Avstängd
●

@Airikr: Ja absolut jag postade den i första inlägget.

EDIT: Så här blir det när det är för mycket content. När det är lite typ ett ord då stannar den i botten.

http://i.imgur.com/P6byDo9.jpg

CSS

* {margin: 0; padding: 0;}
html, body {
	font-family: Sans, Sans-serif, Verdana; 
	color: black; 
	background-color: white;
	min-height: 100%;
	}
	  
header { 
	height: 80px; 
	padding: 3px 0; 
	background-color:#DC0707; 
	border-bottom: white; 
	border-bottom: 2px solid black;
	}
	
.wrapper{
	width: 800px; 
	margin: 0 auto;
	}
	
.wrapper h1 { 
	color: white; 
	margin-top: 10px; 
	margin-left: 57px;
	font-family: Consolas;
	}
	
.wrapper b { 
	color: white; 
	display: block; 
	margin-top: 6px; 
	font-family: Consolas; 
	font-size: 14px;
	}	

.menu {
	float: right;
	margin-top: -73px;
	}
	
.menu li {}
	
.menu ul {
	list-style-type: none; 
	text-align: center;
	height: 88px;
	}
	
.menu ul li {
	display: inline; 
	float: left;
	}
	
.menu ul li a {
	display: block;
	margin-top: 20px;
	padding: 14px;
	width: 50px;
	}
	
.menu ul li:hover{
	background-color: black;
	height: 88px;
	}
	 
#content {font-size: 14px; width: 775px; margin-left: auto; margin-right: auto; overflow:auto; padding-bottom: 52px;}
#content a:link{color: black;}
#content a:visited{color: black;}
#content a:hover{color: black;}
#content a:active{color: black;}
.footer{position: absolute; margin-top: -52px; bottom: 0; height: 52px; width: 100%; background-color:#DC0707; border-top: 2px solid black;}
.footer p{margin-left: 30px; color: white; margin-top: 16px;}
.fp {width: 800px; margin: 0 auto;}

a:link {color: white; text-decoration: none;}
a:visited {color: white; text-decoration: none;}
a:hover {color: white; text-decoration: none;}
a:active {color: white; text-decoration: none;}

.allwindows {width: 100%;}
.allwindows h3 {
  width: 100%;
  background-color: black;
  color: black;
}
#window1, #window2, #window3 {
  background-color: black;
  color: black; 
  width: 15%;
  text-align: center;
}

.ed {width: 18%;}
.clearfix{clear:both;}
Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

För mig funkade det hur bra som helst. Fick dock göra om en hel del. Mycket behöver ändras. Bland annat behöver du inte upprepa samma sak hela tiden (som med float i footern). Där behöver du bara ha ett enda element (till exempel en div) med allt i, och så texten efter varann. Hett tips: text-align: right;.

<!DOCTYPE HTML>

<html>
<head>
    <title>Förnman Efternamn</title>
	<meta charset="ISO-8859-1" />
	<meta charset="UTF-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTf-8" />
	<style>
		html {
			margin : 0;
			padding : 0;
		}

		body {
			font-family: Sans, Sans-serif, Verdana;
			color: black;
			padding: 0;
			margin: 0;
			background-color: white;
			min-height: 100%;
		}

		header {
			background-color:#DC0707;
			border-bottom: white;
			border-bottom: 2px solid black;
			padding: 15px 0;
		}

		.wrapper {
			width: 800px;
			margin: 0 auto;
		}

		.wrapper > .logo {
			color: white;
			font-family: 'Consolas', sans-serif;
			display: inline-block;
			vertical-align: top;
		}

		.wrapper > .logo > a > .big {
			font-size: 28px;
		}

		nav {
			display: inline-block;
			vertical-align: top;
		}

		nav li {}

		nav ul {
			list-style-type: none;
			text-align: center;
		}

		nav ul li {
			display: inline;
			float: left;
		}

		nav ul li a {
			display: block;
			padding: 10px 14px;
		}

		nav ul li:hover{
			background-color: black;
		}

		#content {min-height: 100%; font-size: 14px; width: 775px; margin-left: auto; margin-right: auto; overflow:auto; padding: 52px;}
		#content a:link{color: black;}
		#content a:visited{color: black;}
		#content a:hover{color: black;}
		#content a:active{color: black;}
		.footer{padding:30px 0;width: 100%; background-color:#DC0707; border-top: 2px solid black;}
		.footer p{margin-left: 30px; color: white;}
		.fp {width: 800px; margin: 0 auto;}

		a:link {color: white; text-decoration: none;}
		a:visited {color: white; text-decoration: none;}
		a:hover {color: white; text-decoration: none;}
		a:active {color: white; text-decoration: none;}

		.allwindows {width: 100%;}
		.allwindows h3 {
			width: 100%;
			background-color: black;
			color: black;
		}

		#window1, #window2, #window3 {
			background-color: black;
			color: black; 
			width: 15%;
			text-align: center;
		}

		.clearfix{clear:both;}
	</style>
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
	<meta charset="UTF-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="" />
</head>
<body>


<header>
	<div class="wrapper">
		<div class="logo">
			<a href="?site=asd" style="text-decoration: none;">
				<div class="big">dsa</div>
				Screenwriter / Web developer / Gamer / Streamer
			</a>
		</div>

		<nav>
			<ul>
				<li><a href="?site=home">Home</a></li>
				<li><a href="?site=cv">Cv</a></li>
				<li><a href="?site=about">About</a></li>
				<li><a href="?site=contact">Contact</a></li>
			</ul>
		</nav>
	</div>
</header>

<div id="content">
<p>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br>innehåll<br></p>
</div>
<div class="footer">
<div class="fp">
<p>© Site 2016.
<a style="float: right; margin-right: 2%;" href="">Instagram</a>
<a style="float: right; margin-right: 2%;" href="?site=twitch">Twitch</a>
<a style="float: right; margin-right: 2%;" href="">Youtube</a>
<a style="float: right; margin-right: 2%;" href="">Twitter</a>
</p>
</div>
</div>
<script type="text/javascript" id="cookieinfo"
src="//cookieinfoscript.com/js/cookieinfo.min.js">
</script>
</body>
</html>
Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Det enklaste om man inte är kung på css är att använda calc.

Sätt detta på content.

min-height: calc(100% - 80px - 2px - 50px - 2px); /* höjden är 100% av body minus header, headers border, och footer, och footers border */

då kommer footer exakt rätt.

Ta bort margins, paddings etc. Tänk på att border och padding ökar höjder. Vill man inte det så kan man kolla på box-sizing. Tänk även på att stänga taggar i rätt ordning (fel: <a...><b>...</a></b>).

Edit: bestäm dig också för antingen UTF-8 (rekommenderas) eller ISO-88591 (kan vara smidigare med äldre PHP och SQL)
Lycka till!

fullständig lösning för den som gillar copy paste: (jag tog bort designrelaterad kod)

<html>
<head>
    <title>Förnman Efternamn</title>
	<meta charset="UTF-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTf-8" />

<style>

* {margin: 0; padding: 0;}
html, body {
	font-family: Sans, Sans-serif, Verdana; 
	color: black; 
	background-color: white;
	min-height: 100%;
}

header { 
	height: 80px; /* behövs eftersom header har floatat content*/
	background-color:#DC0707; 
	border-bottom: 2px solid black;
}
	
header h1 { 
	color: white; 
	margin-top: 10px; 
	margin-left: 57px;
	font-family: Consolas;
}
	
header b { 
	color: white; 
	display: block; 
	margin-top: 6px; 
	font-family: Consolas; 
	font-size: 14px;
	}	

.menu {
	float: right;
}
	
.menu ul {
	list-style-type: none; 
	text-align: center;
}
	
.menu ul li {
	display: inline; 
	float: left;
	height: 80px;/*sätt att li ska ha en viss höjd alltid, oavsett om det är hover eller ej*/
}
	
.menu ul li a {
	display: block;
	margin-top: 20px;
	padding: 14px;
	width: 50px;
}
	
.menu ul li:hover{
	background-color: black;
	/*att ändra höjden på något vid hover är ingen bra ide*/
}
	 
#content {font-size: 14px; width: 775px; margin-left: auto; margin-right: auto; overflow:auto;


    min-height: calc(100% - 80px - 2px - 50px - 2px); /* höjden är 100% minus header, headers border, och footer, och footers border */


}
#content a:link{color: black;}
#content a:visited{color: black;}
#content a:hover{color: black;}
#content a:active{color: black;}
.footer{
	bottom: 0;
	height: 50px;
	width: 100%;
	background-color:#DC0707;
	border-top: 2px solid black;
}
.footer p{margin-left: 30px; color: white; margin-top: 16px;}
.fp {width: 800px; margin: 0 auto;}

a:link {color: white; text-decoration: none;}
a:visited {color: white; text-decoration: none;}
a:hover {color: white; text-decoration: none;}
a:active {color: white; text-decoration: none;}

.allwindows {width: 100%;}
.allwindows h3 {
  width: 100%;
  background-color: black;
  color: black;
}
#window1, #window2, #window3 {
  background-color: black;
  color: black; 
  width: 15%;
  text-align: center;
}

.clearfix{clear:both;}
</style>

	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
	<meta charset="UTF-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="" />
</head>
<body>
<header>
    <div class="wrapper">
    	<div style="float:left">
	        <h1><a style="text-decoration: none;">asdasd</a> </h1>
			<b><a style="text-decoration: none;">Screenwriter / Web developer / Gamer / Streamer</a></b>
		</div>
        <div class="menu">
            <ul>
                <li><a href="?site=home">Home</a></li>
				<li><a href="?site=cv">Cv</a></li>
                <li><a href="?site=about">About</a></li>
                <li><a href="?site=contact">Contact</a></li>
            </ul>
        </div>
    </div>
</header>

<div id="content">
    <p>asasasd</p>
    <div id="shit"></div>
    <button onclick="var text=''; for(var i=0; i<1000; i++){text += 'perfect ';}; document.getElementById('shit').innerHTML=text;">Add 1000 perfect</button>
</div>
<div class="footer">
    <div class="fp">
        <p>© Site 2016.
		<a style="float: right; margin-right: 2%;" href="">Instagram</a>
		<a style="float: right; margin-right: 2%;" href="?site=twitch">Twitch</a>
		<a style="float: right; margin-right: 2%;" href="">Youtube</a>
		<a style="float: right; margin-right: 2%;" href="">Twitter</a>
		</p>
    </div>
</div>
<script type="text/javascript" id="cookieinfo"
	src="//cookieinfoscript.com/js/cookieinfo.min.js">
</script>
</body>
</html>
Redigera
Citera flera Citera
Permalänk
Avstängd
●

Tack alla jag ska testa 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