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; --nav-height: 5em;
--body-maxwidth: 900px; --body-maxwidth: 900px;
--footer-maxwidth: 900px; --footer-maxwidth: 900px;
--footer-height: 9em; --footer-height: 3em;
--padding-border: 1em; --padding-border: 1em;
} }
@ -32,25 +32,48 @@ html {
body { body {
margin: 0; margin: 0;
position: relative; position: relative;
height: 100%;
}
html, body {
height: 100%;
} }
a { a {
color: var(--font-color); 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 *******************/ /******************* Header *******************/
#navbar { #navbar {
font-size: 2em; font-size: 2em;
margin: 2rem 1rem; padding: 2rem 1rem;
} }
/******************* Footer *******************/ /******************* Footer *******************/
#footer { #footer {
width: 100%; width: 100%;
text-align: center; height: var(--footer-height);
margin-top: 1em; vertical-align: bottom;
position: relative;
}
#footer_text {
position: absolute;
bottom: 0.1em;
left: 50%;
transform: translateX(-50%);
} }
/******************* Container *******************/ /******************* Container *******************/
@ -72,3 +95,6 @@ a {
display: block; display: block;
margin-top: 1em; margin-top: 1em;
} }
.cloud_link {
margin-bottom: 1em;
}

3
templates/footer.php
View file

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

1
templates/header.php
View file

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