Hej,
Mam problem ze stopką, która bez względu na ilość tekstu zawsze będzie na samym dole okna. Próbowałem już wszystkiego. Mój kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div id="nav"><a href="index.html" class="link">Strona Główna</a><a href="produkcje.html" class="link">Produkcje</a><a href="galeria.html" class="link">Galeria</a></div>
</header>
<div id="text">
<div id="fig">
<div class="fig"><a href="https://www.facebook.com/imperiumtalentagency/" target="_blank"><img src="thumbs/fb.svg"></a></div>
<div class="fig"><a href="https://www.instagram.com/zuziasurowy/" target="_blank"><img src="thumbs/ig.svg"></a></div>
<div class="fig"><a href=""><img src="thumbs/gm.svg" target="_blank"></a></div>
</div>
<div id="text-content">
<div id="Z-photo">></div>
</div>
<div id="rewards">
</div>
</div>
<div id="end-footer">
<div id="RPP"></div>
<footer></footer>
</div>
<script src="script/fig.js"></script>
</body>
</html>
*
{
box-sizing: border-box;
}
html, body
{
height: 100%;
padding: 0;
margin: 0;
}
body
{
background-color: #222935;
background-size: 100%;
font-family:'Segoe UI';
color:white;
}
header
{
width:100%;
height: 60px;
background-color: #FF99FF;
}
.fig:hover
{
transition: 1s;
width: 75px;
height: 55px;
background-color: #222950;
}
#fig
{
text-align: center;
top: 20%;
position: fixed;
width: 40px;
animation-duration: 1s;
animation-name: wlatujepo3sekundachibedetamjuzstalnastale;
}
@keyframes wlatujepo3sekundachibedetamjuzstalnastale
{
0%
{
transform: translate(-50px, 0);
}
100%
{
transform: translate(0, 0);
}
}
#nav
{
float: right;
margin-right: 15%;
}
.link
{
color: #222930;
margin: 0 auto;
line-height: 60px;
max-width: 1100px;
padding: 15px;
font-weight: bold;
font-size: 24px;
text-decoration: none;
}
#text
{
margin: 100px auto 0;
width: 100%;
height: 95%;
position: relative;
}
#text-content
{
width: 676px;
height: 95%;
margin-left: 25%;
float: left;
box-sizing: border-box;
padding-bottom: 50px;
text-align: left;
}
#Z-photo
{
width: 100%;
text-align: center;
}
.Z-photo-Z
{
border-radius: 100%;
border: 5px solid #FF99FF;
}
#rewards
{
text-align: left;
float: right;
margin-right: 40px;
margin-top: 15%;
overflow: hidden;
width: 30%;
margin-bottom: 18%;
}
#text-content-albums
{
text-align: center;
width: 55%;
margin: 0 auto;
height: 95%;
margin-bottom: 50px;
}
.photo-album
{
margin: 10px 5px;
width: 250px;
background-color: #FFFFFF;
padding: 10px;
opacity: 0.7;
border-radius: 5px;
border: 1px solid silver;
box-sizing: border-box;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
float: left;
}
.photo-album img
{
flex-basis: 100%;
width: 100%;
}
.photo-album figcaption
{
margin-top: 10px;
color: #000000;
}
.photo-album:hover
{
opacity: 1;
transition: 0.3s all linear;
transform: scale(1.1);
}
#end-footer
{
position: absolute;
width: 100%;
height: 50px;
background-color: #FF99FF;
background-size: 100%;
clear: both;
bottom: 0;
padding: 0;
text-align: center;
font-size: 20px;
color: #FFFFFF;
}
footer
{
margin: 0 auto;
line-height: 50px;
}
#RPP a
{
color: #222930;
opacity: 0.5;
text-decoration: none;
padding: 5px;
font-size: 15px;
float: left;
line-height: 50px;
}