Slider at 100% height

HTML & CSS
1

Hey there,

I am currently building a website. The front page displays a slider under a simple navigation. I want the slider to perfectly end at the end of the devices display, so that there is no white space visible and no scrolling is needed.
When using min-height: 100%; it takes the displays-height and puts it beneath the navigation so that the sites height is the devices height + the navigation. How can I fix that? I uploaded the site to my webspace: http://phermann.tk/tts/
Another problem is the picture that won’t fill the slider fully. It should be shown on three slides but only the first one works.

Thanks for helping.
Paul.

2

Hi,

When you say min-height:100% then that will be 100% of the height of the closest parent assuming that the closest parent has height:100% set.

In your example that effectively means your min-height:100% is based on the body’s 100% height so you get a full 100% from wherever that slider element starts. That means that it the slider element is some way down the page then the 100% will carry the divs height well below the bottom of the page.

Suffice to say you just can’t take that approach at all. :slight_smile:

You would also have further problems in that your nav is not a fixed height and when the page is wider or smaller then the slider gets pushed further and further down the page.

I would suggest that you just follow the basic example of where you got the slider from and just fill the whole page as normal and then place your navigation overlaid on the top of the slider (absolutely place it into place). It is just too difficult to have a slider fill the rest of the page excluding a variable height header although it can be done but needs some complicated css and js to achieve.

I think you need to download the files again and start from scratch though as you have a corrupt doctype (which is the only reason parts of this are working anyway) and because some of your css is raw sass files which are not css. Just use css in your css files. If you are using sass then it needs to be converted into css as that is all a browser understands.

Use one of the basic demos so that you have it working first and then amend it as necessary to your design.

3

Thanks for helping. I noticed that the website of the slider itself did it the same way you suggested http://jedrzejchalubek.com/glide/ . So I put the header to absolute and it is working fine now. The only things that still stuck is that the second and third slide are not shown. There is a weird margin on the right when viewing the first slide as well. I have no idea how to fix the margin. I can imagine that it is the problem that causes the second and third slide not to display.

I just noticed that the SASS thing you mentioned actually is a thing. I watched this video and it worked fine in his tutorial. What do I have to do to make it work like I wanted it to work?

Thanks!

4

If you are copying the code from a codepen then you need to copy the css and not the scss. There is an option in codepen to view the css and then you can just copy and paste. You can only use sass if you have it all set up on your system as it translates sass into css.

Here’s your page in working order with the sass converted to css:


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<title>Taxibetrieb Thomas Schulze</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/slider.css"/>
<style>
@font-face {
	font-family: DayRoman;
	src: url(fonts/DAYROM__.ttf);
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
header {
	position: absolute;
	z-index: 999;
}
.nav a {
	-o-transition:.3s;
	-ms-transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
}
header {
	height: 160px;
	width: 100%;
	background-color: rgba(2552,255,255,.95);
}
ul#navigation {
	padding: 0;
	text-align:center;
	max-width: 1200px;
	height: 160px;
	margin: 0 auto;
}
#navigation li {
	display: inline-block;
	list-style-type: none;
	margin: 0;
	color: #919191;
	font-family: DayRoman;
	font-size: 21px;
}
#navigation li img {
	vertical-align: middle;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.nav {
	line-height: 160px;
	width: 180px;
}
.nav a {
	text-decoration: none;
	display: inline-block;
	position: relative;
}
.nav a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	visibility: hidden;
	-moz-transform: scaleX(0);
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	background-color: red;
	transition: all .3s ease;
}
.nav a:hover:after {
	-moz-transform: scaleX(1);
	-webkit-transform: scaleX(1);
	-ms-transform: scaleX(1);
	transform: scaleX(1);
	visibility: visible;
}
.logo {
	width: 350px;
	height: 160px;
}
.logo a:hover {
	opacity: 80%;
}
</style>
<style>
/*
 | ------------------------------------------
 | Glide styles
 | ------------------------------------------
 | Here are slider styles
 |
*/
html, body {
	height:100%
}
#content {
	width: 100%;
	height: 100%;
}
.slider {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.slides {
	height: 100%;
	padding: 0;
	margin: 0;
	/* Simple clear fix */
                overflow: hidden;
	/**
                 * Prevent blinking issue
                 * Not tested. Experimental.
                 */
                -webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	/**
                 * Here is CSS transitions
                 * responsible for slider animation in modern broswers
                 */
                -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
	-moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
	-ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
	-o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
	transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.slide {
	height: 100%;
	float: left;
	clear: none;
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.s1 {
	background-image: url(http://phermann.tk/tts/css/images/airport.jpg);
}
.s2 {
	background-image: url(http://phermann.tk/tts/css/images/airport.jpg);
}
.s3 {
	background-image: url(http://phermann.tk/tts/css/images/airport.jpg);
}
.box {
	padding: 20px;
	height: auto;
	width: 300px;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	font-size: 24px;
	color: black;
	background-color: rgba(255,255,255,0.8);
	margin-left: 100px;
	margin-top: 200px;
}
.slider-arrows {
}
.slider-arrow {
	position: absolute;
	display: block;
	margin-bottom: -20px;
	padding: 20px;
	font-size: 30px;
}
.slider-arrow--right {
	bottom: 50%;
	right: 30px;
}
.slider-arrow--left {
	bottom: 50%;
	left: 30px;
}
.slider-arrow:hover {
	text-decoration: none;
	color: white;
}
.slider-arrow:link {
	text-decoration: none;
	color: white;
}
.slider-arrow:visited {
	text-decoration: none;
	color: white;
}
.slider-nav {
	position: absolute;
	bottom: 30px;
}
.slider-nav__item {
	width: 12px;
	height: 12px;
	float: left;
	clear: none;
	display: block;
	margin: 0 5px;
	background: #fff;
}
.slider-nav__item:hover {
	background: #ccc;
}
.slider-nav__item--current {
	background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://phermann.tk/tts/js/jquery.glide.js"></script>
<script src="http://phermann.tk/tts/js/modernizr.custom.js"></script>
</head>
<body>
<header>
		<ul id="navigation">
				<li class="nav"><a href="#">Seehotel Zeuthen</a></li>
				<li class="nav"><a href="#">Service</a></li>
				<li class="logo"><a href="#"><img id src="http://phermann.tk/tts/css/images/logo.png" alt="Taxibetrieb Thomas Schulze"></a></li>
				<li class="nav"><a href="#">Kontakt</a></li>
				<li class="nav"><a href="#">Impressum</a></li>
		</ul>
</header>
<div id="content">
		<div class="slider">
				<ul class="slides">
						<li class="slide s1">
								<div class="box">Caption</div>
						</li>
						<li class="slide s2">
								<div class="box">Caption</div>
						</li>
						<li class="slide s3">
								<div class="box">Caption</div>
						</li>
				</ul>
		</div>
</div>
<script>
$('.slider').glide();
</script>
</body>
</html>

This is a working demo so copy and paste and test while online and it will work. Once you have decided it is what you want then move the css to the relevant external files.

5

Thanks for that. I did not notice that CodePen would be converting it, I thought it would just set the right syntax coloring for the code. You somehow fixed the slider problem. Can you quickly explain what you have done? Thank you so much!

EDIT: I put some captions in there and wanted them to be position absolute. As a consequence they don’t stick with the slides they refer to and are visible only on the first one. How can I bring them back to their slides without using position:relative and margins and stuff?

6

Add position:relative to .slide to provide a positioning context for the absolute child.

Most of the fixes I did were to fix the sass issues and to clean up your selectors as you had styles like ‘li{etc…} and a{etc…}’ which were hitting all those elements including the ones in your slider so you must make them specific to the element concerned. Apart from that I fixed the 100% heights to work properly and it all fell into place.