fix footer
This commit is contained in:
parent
3f090d3f4b
commit
fb11bdca19
GPG Key ID:
D3C7172E0A70F8CF
@ -1,13 +1,6 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #EEE;
|
||||
color: #CCC;
|
||||
display: flex;
|
||||
flex-direction: column; }
|
||||
color: #CCC; }
|
||||
|
||||
#content {
|
||||
padding-top: 64px;
|
||||
@ -15,7 +8,6 @@ body {
|
||||
justify-content: center;
|
||||
line-height: 1.4; }
|
||||
|
||||
/*############################################################################*/
|
||||
.content-responsive {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
@ -60,26 +52,26 @@ body {
|
||||
display: block;
|
||||
width: 100%; }
|
||||
|
||||
.headerdiv {
|
||||
#headerdiv {
|
||||
background-color: #333;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #111;
|
||||
box-shadow: 0 0 8px #000000;
|
||||
position: fixed;
|
||||
width: 100%; }
|
||||
.headerdiv .logowrapper {
|
||||
#headerdiv .logowrapper {
|
||||
flex: initial;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 42px; }
|
||||
.headerdiv .logowrapper .logo {
|
||||
#headerdiv .logowrapper .logo {
|
||||
height: 30px;
|
||||
margin: 4px 0px 8px 6px;
|
||||
margin: 4px 0 8px 6px;
|
||||
flex: initial; }
|
||||
.headerdiv .tabrow {
|
||||
#headerdiv .tabrow {
|
||||
display: flex;
|
||||
flex: auto; }
|
||||
.headerdiv .tabrow .tab {
|
||||
#headerdiv .tabrow .tab {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -94,48 +86,73 @@ body {
|
||||
min-width: 64px;
|
||||
text-align: center;
|
||||
flex: initial; }
|
||||
.headerdiv .tabrow .tab:hover {
|
||||
#headerdiv .tabrow .tab:hover {
|
||||
cursor: pointer;
|
||||
background-color: #555; }
|
||||
.headerdiv .tabrow .tab_split {
|
||||
#headerdiv .tabrow .tab_split {
|
||||
flex: auto; }
|
||||
.headerdiv .tabrow .tab_github {
|
||||
#headerdiv .tabrow .tab_github {
|
||||
background-color: #4078c0;
|
||||
border-left: 1px solid #111;
|
||||
border-right: 1px solid #111;
|
||||
color: black; }
|
||||
.headerdiv .tabrow .tab_github:hover {
|
||||
#headerdiv .tabrow .tab_github:hover {
|
||||
background-color: #c9510c;
|
||||
color: black; }
|
||||
|
||||
@media (max-width: 850px) {
|
||||
.headerdiv {
|
||||
position: static; }
|
||||
|
||||
.logowrapper {
|
||||
#headerdiv {
|
||||
position: static;
|
||||
flex-direction: column; }
|
||||
#headerdiv .logowrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
|
||||
.headerdiv {
|
||||
#headerdiv .tabrow {
|
||||
flex-direction: column; }
|
||||
|
||||
.tabrow {
|
||||
flex-direction: column; }
|
||||
|
||||
.tab {
|
||||
#headerdiv .tabrow .tab {
|
||||
border: 1px solid #000;
|
||||
font-weight: bold;
|
||||
margin: 5px 10px; }
|
||||
|
||||
#content {
|
||||
padding-top: 0px; } }
|
||||
#footerdiv {
|
||||
margin-top: auto;
|
||||
padding-bottom: 10px;
|
||||
background-color: transparent;
|
||||
text-align: center; }
|
||||
padding-top: 0; } }
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%; }
|
||||
|
||||
#mastercontainer {
|
||||
min-height: 100%;
|
||||
position: relative; }
|
||||
|
||||
#content {
|
||||
padding-bottom: 60px;
|
||||
/* Height of the footer */ }
|
||||
|
||||
#footerdiv {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
/* Height of the footer */
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#footerdiv {
|
||||
width: auto; } }
|
||||
@media (min-width: 768px) {
|
||||
#footerdiv {
|
||||
width: auto; } }
|
||||
@media (min-width: 992px) {
|
||||
#footerdiv {
|
||||
width: 724px; } }
|
||||
@media (min-width: 1200px) {
|
||||
#footerdiv {
|
||||
width: 1170px; } }
|
||||
#footerdiv hr {
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
|
||||
@ -1,13 +1,42 @@
|
||||
@import 'styles_config';
|
||||
|
||||
#footerdiv {
|
||||
margin-top:auto;
|
||||
padding-bottom: 10px;
|
||||
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
html, body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/19723677/1761622
|
||||
|
||||
#mastercontainer {
|
||||
min-height:100%;
|
||||
position:relative;
|
||||
}
|
||||
#headerdiv {
|
||||
//...
|
||||
}
|
||||
#content {
|
||||
padding-bottom:60px; /* Height of the footer */
|
||||
}
|
||||
#footerdiv {
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
height:60px; /* Height of the footer */
|
||||
text-align: center;
|
||||
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
//----------------------------------------------
|
||||
|
||||
@media(max-width:767px) { #footerdiv { width: auto; } }
|
||||
@media(min-width:768px) { #footerdiv { width: auto; } }
|
||||
@media(min-width:992px) { #footerdiv { width: 724px; } }
|
||||
@media(min-width:1200px){ #footerdiv { width: 1170px; } }
|
||||
|
||||
#footerdiv hr {
|
||||
margin-bottom: 5px;
|
||||
display:block;
|
||||
|
||||
@ -1,15 +1,8 @@
|
||||
@import 'styles_config';
|
||||
|
||||
html, body{ height:100%; margin:0; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: $COL_BACKGROUND;
|
||||
|
||||
color: $COL_TEXT_NORMAL;
|
||||
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
#content {
|
||||
@ -20,8 +13,6 @@ body {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/*############################################################################*/
|
||||
|
||||
.content-responsive {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import 'styles_config';
|
||||
|
||||
.headerdiv {
|
||||
#headerdiv {
|
||||
background-color: #333;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #111;
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
.logo {
|
||||
height: 30px;
|
||||
margin: 4px 0px 8px 6px;
|
||||
margin: 4px 0 8px 6px;
|
||||
flex: initial;
|
||||
}
|
||||
}
|
||||
@ -71,9 +71,9 @@
|
||||
|
||||
@media (max-width: 850px) {
|
||||
|
||||
.headerdiv {
|
||||
#headerdiv {
|
||||
position: static;
|
||||
}
|
||||
flex-direction: column;
|
||||
|
||||
.logowrapper {
|
||||
display: flex;
|
||||
@ -81,13 +81,8 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.headerdiv {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tabrow {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab {
|
||||
border: 1px solid #000;
|
||||
@ -95,9 +90,11 @@
|
||||
|
||||
margin: 5px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content {
|
||||
padding-top: 0px;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="headerdiv">
|
||||
<div id="headerdiv">
|
||||
<div class="logowrapper">
|
||||
<img class="logo" src="/data/images/logo.png" />
|
||||
</div>
|
||||
|
||||
@ -16,6 +16,7 @@ $allposts = Blog::listAllOrderedDescending();
|
||||
<link rel="stylesheet" href="/data/css/styles.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mastercontainer">
|
||||
|
||||
<?php include (__DIR__ . '/../fragments/header.php'); ?>
|
||||
|
||||
@ -47,5 +48,7 @@ $allposts = Blog::listAllOrderedDescending();
|
||||
</div>
|
||||
|
||||
<?php include (__DIR__ . '/../fragments/footer.php'); ?>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -9,6 +9,7 @@
|
||||
<link rel="stylesheet" href="/data/css/styles.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mastercontainer">
|
||||
|
||||
<?php include (__DIR__ . '/../fragments/header.php'); ?>
|
||||
|
||||
@ -20,5 +21,6 @@
|
||||
|
||||
<?php include (__DIR__ . '/../fragments/footer.php'); ?>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user