0
문제점이 하나 있습니다. 내 바닥 글은 페이지 하단에 실제로 고정되어 있지 않습니다. 그럼 내가 어떻게 깨달을 수 있니? 내 사이트에 대해 전체 반응 형 바닥 글이 필요합니다. 바닥 글은 모든 뷰포트 크기의 페이지 하단에 붙어 있어야합니다.가변 바닥 글 높이
도움 주셔서 감사합니다.
HTML/PHP :
<?php
defined('_JEXEC') or die;
$doc = JFactory::getDocument();
$doc->addStyleSheet('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
$doc->addStyleSheet('//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300');
$doc->addScript('http://kollektionen.testgott.de/js/ruhecollections.min.js');
$doc->addStylesheet('http://kollektionen.testgott.de/deliver.php?style=2a');
$doc->addStyleSheet('templates/' . $this->template . '/css/main.css');
$doc->addScript('templates/' . $this->template . '/js/vendor/jquery-2.1.1.min.js');
$doc->addScript('templates/' . $this->template . '/js/plugins/slicknav.js');
$doc->addScript('templates/' . $this->template . '/js/vendor/modernizr-2.8.2.cb.min.js');
$doc->addScript('templates/' . $this->template . '/js/main.js');
?>
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<jdoc:include type="head"/>
</head>
<body>
<header>
<div class="content-wrap">
<div class="header-content">
<div class="logo">
<jdoc:include type="modules" name="logo"/>
</div>
<div class="header-data">
<jdoc:include type="modules" name="header-data"/>
</div>
</div>
</header>
<nav id="mainnav">
<div class="nav-wrap">
<jdoc:include type="modules" name="nav"/>
</div>
</nav>
<nav id="menu2">
<jdoc:include type="modules" name="menu2"/>
</nav>
<div id="wrap-all">
<div class="content-wrap">
<jdoc:include type="message"/>
<jdoc:include type="component"/>
<jdoc:include type="modules" name="kontakt"/>
</div>
</div>
<footer>
<div class="footer-data">
<div class="footer-wrap">
<div class="col-md-1">
<jdoc:include type="modules" name="adress"/>
</div>
<div class="col-md-2">
<jdoc:include type="modules" name="tel"/>
</div>
<div class="col-md-3">
<jdoc:include type="modules" name="btn"/>
</div>
<div class="col-md-4">
<jdoc:include type="modules" name="menu"/>
</div>
</div>
</footer>
</body>
</html>SCSS/CSS : 브라우저 창에 요소의 상대적 위치 할 위치를 고정 할 필요 같은
/* ==========================================================================
Author's custom styles
========================================================================== */
body {
font-family: 'Open Sans', Oswald, sans-serif;
margin: 0;
font-size: 1em;
height: 100%;
width: 100%;
background-image: url('../img/bg-beige.gif');
background-repeat: repeat;
}
h1 {
font-size: 1.33em;
color: #0e7035;
font-weight: 400;
}
h2{
font-size: 1em;
color:#0e7035;
font-weight: 400;
}
p {
font-weight: 300;
}
.nav-wrap{
width: 1005px;
max-width: 100%;
margin: 0 auto;
}
.wrapper-mobile{
display:none;
}
.wrapper-full{
width: 1005px;
max-width: 100%;
margin: 0 auto;
}
header {
width: 100%;
height: 225px;
background-image: url('../img/bg-gruen.gif');
background-repeat: repeat;
position: relative;
padding-top: 1em;
-moz-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.2);
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.2);
}
div#wrap-all {
max-width: 1100px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
.content-wrap {
width: 1005px;
max-width: 100%;
margin: 0 auto;
}
.logo {
float: left;
padding-top: 1.5em;
img {
max-width: 100%;
height: auto;
}
}
.header-data {
ul {
text-align: right;
}
li {
list-style: none;
color: #fff;
margin: .5em 0em;
font-size: .75em;
padding-right: 1em;
span {
font-family: 'Open Sans', arial, sans-serif;
}
}
}
#mainnav {
height: 65px;
position: relative;
background-color: rgba(255, 255, 255, 0.33);
top: -4.15em;
left: 0em;
}
nav{
margin-top: .1em;
.nav-child > li:last-child{
margin-right: 2.5em;
}
.nav-child > li:hover:last-child{
margin-right: 2.5em;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 15px 17px 0;
list-style: none;
float:right;
margin-top: -0.5em
}
ul li {
display: inline-block;
margin-right: 2.5em;
position: relative;
padding: 15px 10px;
border: 1px solid transparent;
box-shadow: inset 0px 0px 25px transparent;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:last-child{
margin-right: 0;
}
ul li:hover {
border: 1px solid #fffefc;
box-shadow: inset 0px 0px 15px #fffefc;
margin-right:2.5em;
}
ul li:hover:last-child{
margin-right: 0;
}
li.current.active{
border: 1px solid #fffefc;
box-shadow: inset 0px 0px 15px #fffefc;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 16em;
padding-top: 1.1em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
z-index: 1000;
}
ul li a{
color:#fff;
text-decoration: none;
}
ul li ul li {
background-color:rgba(255,254,252,0.9);
display: block;
}
ul li ul li a{
margin-left: .5em;
color:black;
}
ul li ul li a:hover {
color:#0e7035;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
margin-left: 1em;
}
ul li:hover ul {
display: block;
visibility: visible;
opacity: 1;
-webkit-box-shadow: -25px 25px 15px -25px rgba(0, 0, 0, 0.5); /* WebKit */
-moz-box-shadow: -25px 25px 15px -25px rgba(0, 0, 0, 0.5) ; /* Firefox */
box-shadow: -25px 25px 15px -25px rgba(0, 0, 0, 0.5); /* Standard */
}
}
.content {
display: block;
padding: .5em;
margin-bottom: 3.5em;
.intro {
width: 50%;
display: block;
float: left
}
.intro img {
width: 100%;
height: auto;
}
h1 {
font-size: 1.33em;
color: #0e7035;
font-weight: 400;
}
p {
font-weight: 300;
}
.check-box {
margin-top: 2em;
width: 50%;
display: block;
float: right;
ul {
list-style: none;
color: #0e7035;
}
li {
font-weight: 100;
margin-bottom: .5em;
font-size: 1.15em;
i {
margin-right: .5em;
font-size: 1.333em;
}
}
}
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
#content{
margin-bottom: 1.5em;
}
.product-content{
h2{
color:#0e7035;
font-size: 1em;
font-weight: 600;
}
}
.product-img{
margin-bottom: 1em;
float:left;
margin-right: 1.5em;
}
.product-row{
overflow: auto;
height: 100%;
width: 100%;
margin-bottom: 1em;
border-bottom: 1px solid #0e7035;
}
.product-row:last-child{
margin-top: 1.5em;
}
.kontakt-content{
width: 100%;
}
.content-kontakt{
overflow: auto;
height: 100%;
width: 100%;
margin-bottom: 1em;
}
.kontakt-data {
list-style: none;
padding: 0;
}
.kontakt-map{
float: right;
}
footer {
-moz-box-shadow: 0px -15px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px -15px 15px rgba(0, 0, 0, 0.2);
box-shadow: 0px -15px 15px rgba(0, 0, 0, 0.2);
background-image: url('../img/bg-gruen.gif');
background-repeat: repeat;
position: relative;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4{
float:left;
width: 25%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
ul{
padding:0;
}
}
.col-md-2, .col-md-3{
text-align: center;
margin-top: .6em;
font-size: 1.5em;
}
.col-md-3{
li{
margin-right: 1em;
display:inline;
}
}
.col-md-4{
float:right;
text-align: right;
ul {
li{
a{
text-decoration: none;
color:#fff;
}
}
padding:0;
}
}
.footer-data {
max-width: 1005px;
width: 100%;
margin: 0 auto;
padding: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
li {
margin-bottom: .5em;
list-style: none;
color: #fff;
span {
font-family: 'Open Sans', arial, sans-serif;
}
}
}
.copyright-wrap {
width: 1005px;
max-width: 100%;
margin: 0 auto;
}
/*
Mobile Menu Core Style
*/
.slicknav_btn { position: relative; display: block; vertical-align: middle; float: right; padding: 0.438em 0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; }
.slicknav_menu .slicknav_menutxt { display: none; line-height: 1.188em; float: left; }
.slicknav_menu .slicknav_icon { float: left; margin: 0.188em 0 0 0.438em; }
.slicknav_menu .slicknav_no-text { margin: 0 }
.slicknav_menu .slicknav_icon-bar { display: block; width: 1.125em; height: 0.125em; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em }
.slicknav_nav { clear: both }
.slicknav_nav ul,
.slicknav_nav li { display: block }
.slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; }
.slicknav_nav .slicknav_item { cursor: pointer; }
.slicknav_nav .slicknav_row { display: block; }
.slicknav_nav a { display: block }
.slicknav_nav .slicknav_item a,
.slicknav_nav .slicknav_parent-link a { display: inline }
.slicknav_menu:before,
.slicknav_menu:after { content: " "; display: table; }
.slicknav_menu:after { clear: both }
/* IE6/7 support */
.slicknav_menu { *zoom: 1 }
/*
User Default Style
Change the following styles to modify the appearance of the menu.
*/
.slicknav_menu {
display: none;
font-size:16px;
}
/* Button */
.slicknav_btn {
margin: 5px 5px 6px;
text-decoration:none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 1.5em;
}
/* Button Text */
.slicknav_menu .slicknav_menutxt {
color: #FFF;
font-weight: bold;
}
/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
background-color: #f5f5f5;
}
.slicknav_menu {
background-image:url('../img/bg-gruen.gif');
padding:5px;
}
.slicknav_nav {
color:#fff;
margin:0;
padding:0;
font-size:0.875em;
}
.slicknav_nav, .slicknav_nav ul {
list-style: none;
overflow:hidden;
}
.slicknav_nav ul {
padding:0;
margin:0 0 0 20px;
}
.slicknav_nav .slicknav_row {
padding:5px 10px;
margin:2px 5px;
}
.slicknav_nav a{
padding:5px 10px;
margin:2px 5px;
text-decoration:none;
color:#fff;
}
.slicknav_nav .slicknav_item a,
.slicknav_nav .slicknav_parent-link a {
padding:0;
margin:0;
}
.slicknav_nav .slicknav_row:hover {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background:#ccc;
color:#fff;
}
.slicknav_nav a:hover{
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background:#ccc;
color:#222;
}
.slicknav_nav .slicknav_txtnode {
margin-left:15px;
}
.footer-copyright {
height: 65px;
width: 100%;
position: absolute;
background-color: rgba(255, 255, 255, 0.2);
bottom: 0em;
left: 0;
}
.footer-wrap{
width: 1005px;
max-width: 100%;
margin: 0 auto;
overflow:hidden;
}
.copyright {
width: 1005px;
max-width: 100%;
margin: 0 auto;
float: left;
position: relative;
bottom: -3em;
li {
list-style: none;
display: inline;
color: #fff;
}
li:first-child {
margin-top: 1.5em;
float: left;
font-size: 1em;
}
li:last-child {
float: right;
font-size: 1em;
margin-top: 1.5em;
}
}
.control-group{
float: none;
clear: both;
width: 100%;
}
.first-row{
margin-right: 1.5em;
float: left;
}
textarea{
color: #898989;
background-color: #ffffff;
border: solid 1px #0e7035;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 6px;
line-height: 20px;
padding: 4px 10px;
margin: 0;
font-family: 'Open Sans', arial, sans-serif;
}
.btn .btn-success{
span {
background: none;}
}
button{
span{
padding-left: 0px;
}
}
.col-sm-2 > li > a {
color:#fff;
text-decoration: none;
}
.icon-list > li {
margin-right: 1em;
display: inline;
}
#menu2 {
display:none;
}
.icon-list a {
color:#fff;
}
@media only screen and (max-width: 1200px){
div#wrap-all {
width:90%;
max-width: none;
}
}
@media only screen and (max-width: 1024px){
body{
font-size: .833em;
}
footer{
}
.copyright{
float: left;
position: relative;
bottom: -6em;
}
#mainnav{
height: 65px;
position: relative;
background-color: rgba(255, 255, 255, 0.33);
top: -5em;
left: 0em;
}
}
@media only screen and (max-width: 800px){
.footer-data > .content-wrap > .wrapper-full {
display: none;
}
.footer-data > .content-wrap > .wrapper-mobile {
display: block;
}
}
@media only screen and (max-width: 813px) {
.copyright{
bottom: -5.5em;
}
}
@media only screen and (max-width: 768px){
}
@media only screen and (max-width: 700px){
.content .intro{
width: 100%;
}
.content .check-box{
width: 100%;
ul{
padding:0;
}
}
.logo{
width: 100%;
}
.header-data ul {
float:left;
}
#mainmenu {
}
.menu{
display: none;
}
.js .slicknav_menu {
display: block;
}
.slicknav_menu{
display: block;
}
nav ul li:hover{
border: 1px solid transparent;
box-shadow: inset 0px 0px 15px transparent;
margin-right: 0em;
}
.header-data li {
display:inline;
}
}
@media screen and (max-width: 477px){
body{
font-size: 0.75em;
}
#mainnav{
top:-5.5em;
}
}
@media screen and (max-width: 320px){
}