raghnarok/simpleWordsCloud
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix the footer to the bottom of the page

Browse source
This commit is contained in:
Gregory Trolliet 2020-11-22 15:53:46 +01:00
parent 72e25c39d8
commit da0cfeb470
3 changed files with 34 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
css/style.css
View file

@ -14,7 +14,7 @@
--nav-height: 5em;
--body-maxwidth: 900px;
--footer-maxwidth: 900px;
--footer-height: 9em;
--footer-height: 3em;
--padding-border: 1em;
}
@ -32,25 +32,48 @@ html {
body {
margin: 0;
position: relative;
height: 100%;
}
html, body {
height: 100%;
}
a {
color: var(--font-color);
}
#page-wrap {
min-height: 100%;
margin-bottom: calc(0em - var(--footer-height));
}
#page-wrap:after {
content: "";
display: block;
}
footer, #page-wrap:after {
/* .push must be the same height as footer */
height: var(--footer-height);
}
/******************* Header *******************/
#navbar {
font-size: 2em;
margin: 2rem 1rem;
padding: 2rem 1rem;
}
/******************* Footer *******************/
#footer {
width: 100%;
text-align: center;
margin-top: 1em;
height: var(--footer-height);
vertical-align: bottom;
position: relative;
}
#footer_text {
position: absolute;
bottom: 0.1em;
left: 50%;
transform: translateX(-50%);
}
/******************* Container *******************/
@ -72,3 +95,6 @@ a {
display: block;
margin-top: 1em;
}
.cloud_link {
margin-bottom: 1em;
}

3
templates/footer.php
View file

@ -1,7 +1,10 @@
</div>
</div>
<div id="footer">
<div id="footer_text">
SimpleWordsCloud &mdash; Gregory Trolliet
</div>
</div>
<?php
if (!empty($jsWordcloud)) {
echo '<script type="text/javascript" src="js/display.js"></script>';

1
templates/header.php
View file

@ -12,6 +12,7 @@
</head>
<body>
<div id="page-wrap">
<div id="navbar">
<a href="index.php">SimpleWordsCloud</a>
</div>