Sto letteralmente impazzendo per cercare di inserire il footer del mio sito in fondo pagina, praticamente il problema penso già di averlo capito tramite l'ispezione elemento di chrome che mi ha fatto notare che l'area di "interesse" dei tag html e body non racchiude tutto il sito ma solo ed esclusivamente fino a fondo pagina senza contare lo scrool sottostante. Ho già impostato ne css ai tag html e body height 100% e min-height: 100%, ma nulla. Si fermano a fondo pagina senza contare lo scrool e che quindi al di sotto ci sia altro "materiale" . Come posso risolvere? grazie.
- Stato
Per fare quello, devi usare un "min-height: 70%;"
Poi la percentuale la regoli tu in base alle tue necessità, tipo 69% o 68%.
Facendo il 100% non funziona perchè se lo schermo è alto 800px, il tuo contenitore prende le dimensioni di 800px più le dimensioni degli elementi attualmente presenti nella pagina.
Potrebbe esserti d'aiuto l'osservazione.
Se non ti è servita postaci il tuo HTML oppure la pagina interessata, se è online
Poi la percentuale la regoli tu in base alle tue necessità, tipo 69% o 68%.
Facendo il 100% non funziona perchè se lo schermo è alto 800px, il tuo contenitore prende le dimensioni di 800px più le dimensioni degli elementi attualmente presenti nella pagina.
Potrebbe esserti d'aiuto l'osservazione.
Se non ti è servita postaci il tuo HTML oppure la pagina interessata, se è online
Niente ho provato a giocare con il min-height ma nulla.
Magari mi spiego meglio sulla mia problematica:
questa è la mia pagina, e la linea rossa indica l'area che il tag HTML e Body comprende, quindi prende tutto interamente la pagina senza contare però il fatto che la pagina al di sotto continui come nell'immagine sottostante:
Praticamente tutta questa parte è al di fuori del tag html e body secondo l'ispeziona elemento di google crhome, confermato anche dal fatto che nel posizionare in modo relativo il footer le distanze fanno proprio riferimento al grandezza del body dell'immagine soprastante.
Vi lascio anche i codici dell'index e dell file stile.css:
index.php
stile.css
Grazie a chiunque riesca ad aiutarmi!
Magari mi spiego meglio sulla mia problematica:
questa è la mia pagina, e la linea rossa indica l'area che il tag HTML e Body comprende, quindi prende tutto interamente la pagina senza contare però il fatto che la pagina al di sotto continui come nell'immagine sottostante:
Praticamente tutta questa parte è al di fuori del tag html e body secondo l'ispeziona elemento di google crhome, confermato anche dal fatto che nel posizionare in modo relativo il footer le distanze fanno proprio riferimento al grandezza del body dell'immagine soprastante.
Vi lascio anche i codici dell'index e dell file stile.css:
index.php
HTML:
<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Bebas+Neue">
</head>
<body>
<div id="background">
<div id="body_page">
<div id="page">
<div id="header">
<ul>
<li><a href="index.php">HOME</a></li>
<li><a href="news.php">NEWS</a></li>
<li><a href="forum.php">FORUM</a></li>
<li><a href="chisiamo.php">CHI SIAMO</a></li>
</ul>
<hr>
</div>
<br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br>
<br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br>
<br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br><br>A<br>
</div>
</div>
</div>
</body>
</html>
CSS:
html{
height: 100%;
min-height: 70%;
}
body{
font-size: 100%;
width: 100%;
height: 100%;
min-height: 100%;
position: absolute;
background:url(images/back_repeat.png) repeat-x left top #005f02;
}
p {
font-size: 35px;
color: #FFFFFF;
}
#background{
width: 100%;
height: 100%;
}
#body_page{
width:75%;
height: 100%;
position:relative;
left: 15%;
right: 15%;
}
#page{
width:100%;
height: 100%;
margin:0 auto;
padding: 0 0 20%;
position: relative;
top: 30%;
background-color: white;
}
a {
font-family: 'Bebas Neue', serif;
outline: none;
}
h1{
font-family:Bebas Neue;
color: black;
font-size: 30px;
}
#header {
background: #FFFFFF;
height:9%;
margin:0 0;
position: relative;
top: 0%;
padding-top: 1%;
}
#header hr{
width: 100%;
height: 6%;
background-color:#005f02;
border-right:2% solid #3f3f3f;
}
#header ul {
list-style:none;
margin:0;
overflow:hidden;
}
#header ul li a {
color:#005f02;
font-family:Bebas Neue;
font-size:5.2em;
font-weight:100%;
line-height:100%;
text-decoration:none;
text-transform:uppercase;
}
#header ul li a:hover{
opacity: 0.6;
}
#header ul li {
float: left;
margin:0 2% 0;
}Grazie a chiunque riesca ad aiutarmi!
... grazie mille per il vostro aiuto! 
- Stato