0
Я использую липкий нижний колонтитул, и он продолжает толкаться вниз от высоты браузера, в результате чего между моим основным содержанием и нижним колонтитулом появляется большое количество пробелов. Когда я использую инструмент элемента проверки Firefox, однако он точно выглядит так, как я хочу, удаляя пустое пространство.Удаление пробела между основным контентом и липким нижним колонтитулом
У меня также есть ползунок jQuery Я использую вызываемый nivoslider, но я не думаю, что это повлияет на него.
Любые предложения?
HTML
<!DOCTYPE>
<html>
<head>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<title>Page Title</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/nivo-slider.css" rel="stylesheet" type="text/css" media="screen">
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 400, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: false, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Last', // Prev directionNav text
nextText: 'Next', // Next directionNav text
});
});
</script>
</head>
<body>
<div id="header">
<div class ="title">
<a href="#"><img src="res/title.png" id="title-img" alt=" "></a>
</div>
<div class="navbar">
<div class="navbar_inner">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div id="wrapper">
<div id="content">
<div id="column-left" class="column">
<p>text text text text text text TEXT</p>
</div>
<div class="C-wrapper">
<div id="column-right" class="column">
<p>text text text text text text TEXT</p>
</div>
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="#"><img src="res/slider/slider-img1.jpg" alt="LAN" title="#caption1" data-transition="" /></a>
<a href="#"><img src="res/slider/slider-img2.jpg" alt="LOL" title="#caption2" data-transition="" /></a>
<a href="#"><img src="res/slider/slider-img3.jpg" alt="Starcraft" title="#caption3" data-transition="" /></a>
</div>
</div>
<div id="caption1" class="nivo-html-caption">
<h3>Title</h3>
<p>text text text text</p>
</div>
<div id="caption2" class="nivo-html-caption">
<h3>Title</h3>
<p>text text text text text</p>
</div>
<div id="caption3" class="nivo-html-caption">
<h3>Title</h3>
<p>text text text text text</p>
</div>
<div id="column-center">
<p>text text text text text text TEXT</p>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
</div>
</body>
CSS
*{
margin:0;
padding:0;
text-decoration:none;
}
html{
height: 100%;
}
body{
height: 100%;
min-height: 100%;
background:#1010bf url(../res/bg/bg-hex.png);
}
#header{
margin: 0 auto;
width: 100%
margin-top: 10px;
}
.title{
margin: 0 auto 0 auto;
position: relative;
width: 50%;
}
.navbar{
margin-top: 20px;
margin-bottom: 35px;
padding-top: 10px;
position: relative;
min-height: 30px;
width: 100%;
background: #525454;
float: left;
border-top-color: #000;
border-top-width: 5px;
border-top-style: solid;
border-bottom-color: #000;
border-bottom-width: 5px;
border-bottom-style: solid;
}
.navbar_inner{
margin: 0 auto;
width: 50%;
}
.navbar .navbar_inner ul li{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
padding: 10px 40px;
display: inline;
}
.navbar a:link{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #059695;
}
.navbar a:visited{
color: #059695;
text-decoration: none;
font-weight: bold;
}
.navbar a:active{
text-decoration: none;
font-weight: bold;
}
.navbar a:hover{
text-decoration: none;
font-weight: bold;
color: #00f7ff;
}
.navbar a:focus{
text-decoration: none;
font-weight: bold;
padding: 40px 40px;
color: #00f7ff;
}
#wrapper{
margin: 0 auto -75px auto;
width:1100px;
min-height: 100%;
height: auto !important;
height: 100%;
}
#content{
margin: 0 auto 0 auto;
clear: both;
}
.column{
background-color: #fff;
width: 250px;
height: 500px;
}
#column-left{
float: left;
}
#column-right{
float: right;
}
#column-center{
margin: 10px 30px;
float: left;
width: 540px;
height: 240px;
background-color: #fff;
}
.C-wrapper{
clear: right;
position: relative;
}
.slider-wrapper{
margin: 0 auto;
width: 540px;
border-style: solid;
border-color: #000;
border-width: 5px;
}
.footer{
background-color: #525454;
border-top-color: #000;
border-top-width: 5px;
border-top-style: solid;
}
.footer, .push{
clear: both;
height: 70px;
}
, где это CSS для '.push' DIV? – Vector
Предполагалось, что это будет последний класс .footer. Я исправил его, я возился с ним, чтобы попытаться исправить мою проблему. – Steven
установить нижний колонтитул на 'height: 70px;' – Vector