I'd like to get non-scrolling background div on page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="back"/>
<div class="front">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus turpis tortor, semper id suscipit vel, bibendum eu magna. Nullam a libero nisi. Fusce eget elementum augue. Ut tellus leo, dignissim varius finibus a, aliquet ut turpis. Proin non elit luctus, maximus nunc ac, auctor elit. Nullam erat ante, faucibus ac viverra eget, finibus nec ipsum. Vivamus sit amet purus accumsan justo finibus rutrum eu nec nunc.</p>
<p>Suspendisse eros lorem, luctus vitae volutpat ultricies, egestas et risus. Morbi fermentum iaculis nunc, ac tincidunt elit tristique sed. Aenean efficitur velit elit, vitae efficitur ex lobortis non. Etiam in orci ut libero lobortis laoreet. Suspendisse efficitur et sem non bibendum. Nam iaculis, mi in pharetra auctor, diam tellus commodo eros, eget volutpat ipsum enim vitae justo. Sed non ullamcorper odio, ac euismod ligula. Proin euismod eleifend convallis. Vivamus maximus accumsan dignissim. Morbi interdum magna sit amet tempor lacinia. Vivamus nec mi ligula. Donec tortor ex, commodo a est sit amet, volutpat gravida risus. Mauris vitae malesuada est. Curabitur blandit posuere ligula sit amet feugiat. Sed est tellus, cursus eget laoreet et, imperdiet eget dui. Donec facilisis, leo at mollis maximus, sapien purus lacinia mauris, ut fringilla turpis nibh finibus nunc.</p>
<p>Maecenas eget lorem posuere, tincidunt massa sit amet, vehicula diam. Nunc vel consequat nulla. Etiam volutpat volutpat fringilla. Suspendisse potenti. In mattis ex non ex iaculis, eu gravida nulla ultrices. Curabitur ut sem purus. Donec quis tempor lorem, faucibus condimentum eros. Donec massa dui, euismod non tincidunt sed, tempor id nisl. Pellentesque varius mollis nibh.</p>
</div>
<script src="script.js"></script>
</body>
</html>
My style.css looks like:
.back {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: lightblue;
}
.front {
position: relative;
}
What I expect - my long text scrolled over lightblue background (first div).
Whit I've seen - scrolling locked, I see just on-screen portion of long-text. So, div.back seems to be at top of z-index stack, when I expect opposite.
Why it's happen?
Thanks to #Alohci:
<div class="back"/> is invalid.
Correct is <div class="back"></div>
Related
OVERVIEW
I am building a website to showcase my blockchain and cybersecurity projects I'd worked with. So far, I'd implemented two pages of my website using bootstrap v5.1.3. I'm no front-end developer, but still I wanted to build something of my own.
Currently, I'm writing the description of one of my projects, and later I will add some images into it.
PROBLEM
I'm currently facing the issue of an horizontal bar showing if I write too much paragraphs in the page and I don't know how to make it disappear.
I'm trying to solve this issue so that all the paragraphs are responsive and only appear within the viewport width of a screen, and don't overflow creating the horizontal bar.
Check the image below for a better explanation.
IMAGE
QUESTION
How can I solve this only using bootstrap v5.1.3?
WEBPAGE CODE
/* test.css */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Hack, monospace !important;
background-color: #0f0f0f;
}
body {
display: flex!important;
}
.wrapper {
background-color: #0f0f0f;
}
.text-center.h1 {
color: #F4364C !important;
font-size: 4vw !important;
}
.h6 {
color: #F4364C !important;
font-size: 1.25vw !important;
opacity: 0.5 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Joshua">
<title>Project 1 | XXX XXX</title>
<!-- hack fonts -->
<link href='https://cdn.jsdelivr.net/npm/hack-font#3.3.0/build/web/hack.css' rel='stylesheet' >
<!-- stylesheet -->
<link href='test.css' rel='stylesheet'>
<!-- bootstrap-5.1.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- bootstrap-5.1.3 script bundle with popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-column min-vh-100 min-vw-100 wrapper">
<!-- Project Title -->
<div class="container-fluid my-auto">
<p class="text-center h1"><span>Astronomy Star Registry</span></p>
</div>
<div class="container-fluid my-auto">
<p class="h6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non nibh sit amet eros ullamcorper tincidunt. Curabitur sed imperdiet erat. In facilisis urna magna, ut mollis est posuere nec. Duis non neque vel libero dignissim dictum. Nullam scelerisque, sem porttitor dignissim blandit, enim felis condimentum enim, non cursus felis ex vel felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc lectus odio, finibus nec porta non, varius pulvinar eros. Aenean eget vulputate lorem, sed mollis ipsum. In mollis iaculis sem, quis sodales metus sodales quis. In nec efficitur libero, quis pharetra turpis. Nunc a felis vestibulum lacus feugiat euismod. Integer id diam a arcu dictum imperdiet nec at libero. Aliquam lorem dui, faucibus non posuere vel, venenatis vel augue. Aenean lorem ex, eleifend ut dictum a, semper nec risus. Nunc varius erat tortor, vitae sagittis sem vehicula non.
</p>
<p class="h6">
Aliquam erat volutpat. Pellentesque sagittis, nisi ac tempor lobortis, lacus neque posuere libero, vel maximus nibh dui non massa. Nulla at lectus vestibulum, tristique nisi at, vulputate ex. Vestibulum sit amet pharetra tortor. Sed felis nulla, finibus ut ipsum eget, pretium mollis quam. Proin urna metus, cursus non turpis vel, elementum blandit nulla. Nulla eu accumsan ipsum. Donec sodales tellus a turpis dapibus tincidunt. Praesent luctus vestibulum magna, ac feugiat metus ullamcorper eu. Mauris non elementum nunc, sed sagittis risus. Cras sed elit laoreet, faucibus ligula quis, tempus quam. Donec posuere eget eros eu pulvinar. Vestibulum justo augue, feugiat elementum erat sit amet, tempor porttitor urna. Integer malesuada mauris et ultricies sollicitudin.
</p>
<p class="h6">
Cras hendrerit quis velit vel molestie. Proin ut velit metus. Sed semper et neque non rhoncus. Cras semper dui eget eros tempus, sed malesuada nisi dignissim. Aliquam ante dolor, ultricies quis varius at, pellentesque nec urna. Mauris sit amet commodo nulla, ac malesuada lacus. Proin bibendum quis quam vel volutpat. Ut pulvinar tincidunt vehicula.
</p>
<p class="h6">
Phasellus sit amet vulputate neque, id mattis velit. Vivamus porttitor tellus ac est dictum lacinia. Aenean tincidunt tempus fringilla. Sed aliquam nibh ut turpis condimentum, eget malesuada nibh iaculis. Ut tincidunt at nisl vel tristique. Nam quam nunc, lacinia eget augue dictum, aliquet aliquam lectus. Aenean eleifend quam nec est tempus imperdiet.
</p>
<p class="h6">
In nec leo at tellus bibendum blandit sodales at neque. Sed vel dolor in tellus lobortis imperdiet venenatis in lectus. Ut ex ex, bibendum in fringilla et, vestibulum id mauris. Nam eu lorem nisi. Donec vitae fermentum est. Quisque sodales imperdiet felis, viverra consectetur enim egestas a. Duis leo orci, malesuada nec dolor ac, efficitur consequat dui. Aliquam lobortis commodo viverra.
</p>
<p class="h6">
Nunc vulputate ultricies metus in molestie. Mauris ultrices metus feugiat augue mollis ultrices. Quisque ac mattis enim, sed suscipit orci. Fusce eu enim tempor, bibendum ligula quis, faucibus ligula. Aenean nec iaculis tortor, eu suscipit sem. Proin in elit at lectus euismod lacinia. Quisque ac auctor felis, eget ultrices orci. Curabitur accumsan, massa dictum pellentesque feugiat, mauris velit tincidunt mi, ut porta nisl nibh id nisi. Nam non facilisis arcu. Aliquam eros est, elementum a leo sit amet, porttitor euismod ligula. Maecenas tellus massa, molestie ut ultrices at, finibus ac mauris.
</p>
<p class="h6">
Aliquam congue faucibus libero. Aenean sed suscipit ipsum. Aenean varius eleifend metus in pulvinar. Ut dapibus condimentum vehicula. Sed dictum arcu nulla, eget semper turpis fermentum at. Nam congue pretium rutrum. Mauris sit amet mauris sagittis, pulvinar nunc et, posuere diam.
</p>
<p class="h6">
Nunc tortor elit, interdum eget lacinia sed, tincidunt quis ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et nunc eu nibh pulvinar eleifend. Pellentesque porttitor feugiat placerat. In at felis est. Etiam scelerisque velit pharetra, blandit erat non, mattis ex. Aenean congue tortor nec diam maximus, eget auctor nisi accumsan. Sed at dignissim sem, eu placerat tellus. Curabitur lobortis dui nec lorem gravida pellentesque. Duis sagittis, tortor sit amet dapibus finibus, nisi lacus maximus tellus, nec convallis orci velit non libero. Cras sodales, sem in sodales tincidunt, nisi magna facilisis felis, imperdiet elementum erat turpis a dui. Duis non felis pretium, viverra dui eget, condimentum erat. Nunc lobortis convallis felis, ac scelerisque sem cursus a. Ut in gravida tortor. Cras porttitor sapien sem. Aenean cursus erat et libero scelerisque placerat.
</p>
<p class="h6">
Suspendisse potenti. Sed varius ipsum sem, imperdiet vehicula orci pharetra sit amet. Nulla facilisi. Integer faucibus sed tellus quis cursus. Donec lacinia varius ipsum, vitae bibendum justo pharetra vel. Nunc facilisis a dolor sit amet maximus. In nec leo iaculis, pharetra tortor ac, imperdiet arcu. Duis non rhoncus enim, vehicula tincidunt orci. Ut in augue at ante sagittis efficitur ac eget tortor. Nunc eget felis ac quam tempor volutpat. Phasellus id volutpat tortor. Sed cursus eros at interdum convallis. Morbi ullamcorper felis eget massa porttitor pulvinar sed vitae purus. Ut iaculis ante eget ipsum congue, ut efficitur diam condimentum. Etiam lobortis dolor est, sed fringilla diam placerat eget.
</p>
<p class="h6">
Vivamus consectetur, nisi in dapibus vehicula, ipsum eros congue nunc, a posuere nisl mauris vitae sem. Sed interdum placerat commodo. Quisque id molestie sapien. Vestibulum vitae tempus ligula. Morbi eu molestie risus. Vivamus ac sapien tincidunt, hendrerit nibh ut, sagittis lacus. Maecenas pellentesque elementum libero non pretium. Proin in sodales massa. Praesent eu blandit libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>
</div>
</body>
</html>
Please remove min-vw-100 class from your div
<div class="d-flex flex-column min-vh-100 wrapper">
This question already has answers here:
How to make <div> fill <td> height
(6 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I'm trying to make a TABLE with table-layout:fixed be as high as the viewport; and have some large div in a cell that is scrollable.
This works ine in chrome; however; I can't seem to get it so work in Firefox.
See also this fiddle: https://jsfiddle.net/kw09ncjx/
HTML (all inline)
<!doctype html>
<html style="height:100%">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body style="height:100%; padding:0; margin:0">
<table style="table-layout:fixed; width:100%; height:100%; border-collapse:collapse">
<tr style="height:100%">
<td style="width:150px; vertical-align:top">
<div class="content">left too mucht text oh
noooz
</div>
</td>
<td>
<div style="width:100%; height:100%; overflow: auto;">
<div style="height:1600px; white-space:nowrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla leo et tellus
tempus, vitae gravida elit convallis. Donec porta luctus nulla non iaculis. In felis
ligula, volutpat sed neque sit amet, fermentum porttitor felis. In eget semper dui.
Proin ac mollis massa, eu tincidunt enim. Fusce et urna dapibus, elementum risus eget,
tempor quam. Cras sed enim sit amet lacus feugiat interdum a vel enim. In in leo
ullamcorper, dapibus augue quis, mollis enim. Nulla feugiat tortor eget nisi sodales
tempus eget eu felis. Nam sit amet lacus erat. Ut metus magna, fermentum eu metus vitae,
scelerisque semper turpis. Sed varius gravida nisi eu pellentesque. Etiam convallis
dapibus eleifend. Nam rutrum blandit turpis non ornare. Proin interdum lorem et augue
ultricies venenatis. Morbi dolor dolor, mattis et fermentum eget, varius non ipsum.
<br>
Sed ut dignissim ex. Curabitur convallis est eu dui maximus feugiat. Mauris interdum,
justo ac porta tincidunt, magna metus efficitur orci, eu vestibulum lectus ligula
iaculis nunc. Vestibulum accumsan ullamcorper egestas. Aliquam erat volutpat.
Suspendisse eget ultricies diam, nec luctus libero. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Praesent venenatis nibh non dui ullamcorper, at vestibulum
orci semper. Aenean metus felis, lobortis at nisl nec, iaculis convallis erat. Phasellus
eu ultricies elit. Suspendisse vitae varius enim. Donec eget ante feugiat, egestas eros
at, bibendum ligula. Nullam in rutrum quam. Suspendisse sit amet metus accumsan diam
pellentesque rhoncus. Aenean dignissim, odio tincidunt dictum sollicitudin, nulla nibh
tincidunt eros, vitae cursus erat elit vel tortor.
<br>
Duis vitae faucibus nisi. Nulla facilisi. Phasellus vitae dui lectus. Quisque vehicula
sit amet augue eget posuere. Cras tincidunt fringilla massa vitae tristique. Donec
semper odio ut tempus venenatis. Sed euismod malesuada nunc, pharetra interdum augue
porta aliquet. Phasellus eu ex vel felis bibendum auctor. Donec dapibus, dui vitae
ornare pharetra, lorem felis egestas mi, non convallis quam enim et neque. Curabitur eu
felis eu nisi aliquam varius vitae ut erat. Nulla porta, odio sit amet commodo vehicula,
erat eros tincidunt quam, eget lobortis est diam quis ipsum. Proin rhoncus magna a urna
varius mollis. Nam ultricies sapien condimentum, scelerisque lorem nec, tristique risus.
Duis eleifend nunc vel suscipit laoreet.
<br>
</div>
</div>
</td>
<td style="width:40px; background-color: #ccc">
right
</td>
</tr>
</table>
</body>
</html>
It is just a problem that exists in firefox? Or am I doing something that causes undefined behaviour?
I have a fixed header at the top of my page, but when I scroll up the content text stays on top of my header. I want the content to go behind the header.
I have tried adjusting the margins and using z-index, but nothing has worked thus far.
.header {
position: fixed;
border-bottom: 1px solid #000000;
width: 90%;
z-index: 1000;
}
.main {
position: relative;
top: 140px;
z-index: 1;
}
<header class="header">
<img src="">
</header>
<div class="main">
<h1>Hello World!</h1>
</div>
Your code is working as intended. However, you forgot to set the background color of your header which means it is transparent.
I did a few modifications to your snippet to make it a bit more obvious from the snippet but the important CSS is the background colour.
.header {
position: fixed;
border-bottom: 1px solid #000000;
width: 90%;
z-index: 1000;
background: #fff;
top: 0; left: 0; right: 0;
width: 100%;
height: 50px;
}
.main {
position: relative;
top: 140px;
z-index: 1;
}
<header class="header">
<img src="">
</header>
<div class="main">
<h1>Hello World!</h1>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis tellus at magna vulputate, sed tempus arcu finibus. Fusce cursus aliquam posuere. Cras sodales dolor vitae massa eleifend bibendum. Nunc pulvinar dui quis hendrerit pulvinar. Nam interdum, justo non tristique hendrerit, leo nibh posuere diam, sed facilisis est mauris id libero. Suspendisse eget lectus augue. Fusce eget justo ut enim convallis ornare. Maecenas tincidunt dui non lectus elementum rhoncus. Nam sed porttitor turpis. Fusce sit amet urna quis tellus tempus tempus vehicula id tortor. Maecenas tincidunt sit amet eros a ultrices.
</p>
<p>
Vivamus pharetra eget tortor ac imperdiet. Nulla vitae mauris a mauris convallis ultricies at non arcu. Sed blandit turpis quis purus dapibus ornare. Cras ultricies dignissim lorem, sed viverra leo elementum eget. Ut condimentum a nunc in auctor. Pellentesque quis tortor blandit, tincidunt sem et, vestibulum sem. Pellentesque tincidunt ligula ac lectus suscipit dictum. Integer ante ex, pulvinar sit amet laoreet ac, lacinia vel nisl.
</p>
<p>
Cras lacinia at nibh ac placerat. Donec ut molestie felis. Quisque non rutrum diam, a laoreet risus. Maecenas vitae cursus massa, ut ultricies ante. Donec sed sem vel lorem luctus consequat. Integer efficitur pulvinar nulla sed malesuada. Curabitur sollicitudin, libero sit amet cursus pharetra, massa risus auctor neque, vel luctus nulla massa sit amet erat. Quisque at vestibulum nulla. Vestibulum porttitor augue nec placerat scelerisque. Nulla sed augue ac est venenatis viverra vitae non enim. Nulla facilisi. Ut tincidunt est nec volutpat vulputate.
</p>
<p>
Aenean quam risus, ornare et lacus eu, ultricies lobortis metus. Sed ut eleifend nisl. Vestibulum sed odio lobortis, eleifend ex ac, lacinia dui. Nullam sagittis varius sollicitudin. Vestibulum vel nisi diam. Aliquam nulla dolor, porta id ultricies eu, vulputate nec ipsum. Suspendisse porta lectus in augue egestas dictum. Nullam felis sapien, pulvinar quis felis non, ultrices accumsan dolor. Curabitur at diam mollis, porttitor orci ut, posuere nulla. Suspendisse nec sapien eros. Sed sit amet cursus est. Etiam ut lectus ut purus dictum ornare vitae eget lacus. Quisque rhoncus auctor sollicitudin. Nulla feugiat est sit amet tristique hendrerit.
</p>
<p>
Praesent vel enim vel est tincidunt aliquet. Nullam feugiat odio id ante consectetur commodo. Nam sagittis accumsan enim, non faucibus lacus lobortis sit amet. Aliquam tellus dui, volutpat sed gravida sit amet, tincidunt nec diam. Ut rhoncus facilisis tortor, et eleifend sem sagittis id. Maecenas sed odio felis. Donec eu iaculis metus. Integer dignissim volutpat lectus, id ultricies nisl hendrerit sit amet. Donec egestas gravida felis. Aenean blandit iaculis elit, nec luctus tortor luctus ut.
</p></div>
</div>
I have some A4 sized divs with different amount of content. I try to place footers in each page with page numbers. Footer should be fixed on the bottom of the page.
.page {
border:1px solid;
width: 210mm;
height: 297mm;
margin: 10px;
padding: 20px
}
.footer {
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet diam sit amet magna dapibus, a mollis nisi tempus. Etiam hendrerit nec dolor ac euismod. Aenean dignissim eget massa congue vestibulum. Duis volutpat semper dictum. Mauris ut magna ultricies, sagittis urna pretium, convallis est. Curabitur nisl turpis, vehicula vel luctus eu, laoreet ac neque. In congue in nulla vitae luctus. Proin quis felis consectetur, sodales elit vitae, laoreet quam.</p>
<p>Cras pharetra, metus blandit dignissim mollis, libero erat ultrices augue, porttitor finibus velit lacus eu elit. Sed sit amet nulla gravida, interdum erat iaculis, congue sapien. Donec id magna eget sem tincidunt vulputate in vitae tortor. Proin malesuada ut leo et pharetra. Cras enim lacus, pellentesque quis mauris eget, fringilla venenatis risus. Proin varius dui eget rhoncus auctor. Praesent non egestas lorem, eget placerat nunc. Maecenas aliquet orci turpis, quis elementum sem laoreet id. Praesent metus leo, laoreet sed mollis ut, feugiat ut arcu. Vestibulum tempus elit eu neque maximus, eu vulputate leo ullamcorper. Nam commodo sem risus, vitae viverra felis lobortis a. Nulla ac leo nisl. Sed nec lobortis lacus.</p>
<div class="footer">FOOTER page 1/2</div>
</div>
<div class="page"><p>Praesent non justo vitae neque viverra malesuada. Mauris sagittis venenatis diam, sed aliquet nisl sollicitudin id. Suspendisse potenti. Nullam et ornare orci. Nunc eleifend pulvinar leo, vitae viverra lorem. Nunc hendrerit pellentesque consectetur. Vivamus lectus urna, iaculis vel lectus eu, tempus laoreet quam. Integer commodo tincidunt nunc vitae hendrerit. Mauris eget ex ipsum. Mauris pellentesque iaculis metus, vel convallis tellus rutrum sit amet. Pellentesque pretium faucibus justo ut hendrerit. Phasellus vehicula blandit efficitur.</p>
<div class="footer">FOOTER page 2/2</div>
</div>
</body>
</html>
Here is a JsBin too, to play with.
When you're using position: absolute you have to correctly identify containing block:
If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky) (from MDN).
In your case there's no containing block with position value other than static - so .footer elements position themselves relative to root html element.
Set position: relative on .page and everything will work:
.page {
border:1px solid;
width: 210mm;
height: 297mm;
margin: 10px;
padding: 20px;
position: relative;
}
.footer {
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet diam sit amet magna dapibus, a mollis nisi tempus. Etiam hendrerit nec dolor ac euismod. Aenean dignissim eget massa congue vestibulum. Duis volutpat semper dictum. Mauris ut magna ultricies, sagittis urna pretium, convallis est. Curabitur nisl turpis, vehicula vel luctus eu, laoreet ac neque. In congue in nulla vitae luctus. Proin quis felis consectetur, sodales elit vitae, laoreet quam.</p>
<p>Cras pharetra, metus blandit dignissim mollis, libero erat ultrices augue, porttitor finibus velit lacus eu elit. Sed sit amet nulla gravida, interdum erat iaculis, congue sapien. Donec id magna eget sem tincidunt vulputate in vitae tortor. Proin malesuada ut leo et pharetra. Cras enim lacus, pellentesque quis mauris eget, fringilla venenatis risus. Proin varius dui eget rhoncus auctor. Praesent non egestas lorem, eget placerat nunc. Maecenas aliquet orci turpis, quis elementum sem laoreet id. Praesent metus leo, laoreet sed mollis ut, feugiat ut arcu. Vestibulum tempus elit eu neque maximus, eu vulputate leo ullamcorper. Nam commodo sem risus, vitae viverra felis lobortis a. Nulla ac leo nisl. Sed nec lobortis lacus.</p>
<div class="footer">FOOTER page 1/2</div>
</div>
<div class="page"><p>Praesent non justo vitae neque viverra malesuada. Mauris sagittis venenatis diam, sed aliquet nisl sollicitudin id. Suspendisse potenti. Nullam et ornare orci. Nunc eleifend pulvinar leo, vitae viverra lorem. Nunc hendrerit pellentesque consectetur. Vivamus lectus urna, iaculis vel lectus eu, tempus laoreet quam. Integer commodo tincidunt nunc vitae hendrerit. Mauris eget ex ipsum. Mauris pellentesque iaculis metus, vel convallis tellus rutrum sit amet. Pellentesque pretium faucibus justo ut hendrerit. Phasellus vehicula blandit efficitur.</p>
<div class="footer">FOOTER page 2/2</div>
</div>
</body>
</html>
As #fen1x said, you have to set the position of parent div to relative. Just add this CSS rule.
.page{
position: relative;
}
i want to create footer like footer on elementaryos.org
i don't know what css code that make the footer below the page container and will be unveiled when we scroll it down.
<!doctype html>
<html lang="en">
<head>
<title>Test page</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
nav{
background-color: yellow;
width: 100%;
position: fixed;
z-index: 2;
height: 70px;
}
.container{
padding-top: 80px;
width: 100%;
background-color: #dadada;
position: relative;
z-index: 1;
line-height: 3em;
}
footer{
background-color: #bababa;
height: 200px;
width: 100%;
position: relative;
z-index: 0;
}
</style>
</head>
<body>
<nav>
<h1>Navigation</h1>
</nav>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum enim odio, vel placerat dui aliquam sed. Vivamus rhoncus massa commodo nulla scelerisque accumsan. Nunc ac ligula velit. Mauris eu pharetra turpis, eget fermentum lectus. Maecenas ornare sem vel nisi accumsan, at placerat libero vulputate. Pellentesque sit amet neque ac est dapibus faucibus. Morbi pellentesque, dolor ut elementum mattis, lectus nunc auctor nulla, vel lobortis quam ante eu neque.
Mauris sed ligula in lorem rhoncus volutpat. Ut pulvinar dolor id bibendum mollis. Morbi eu facilisis risus. Nullam quis eros elit. Donec quis facilisis dui. Duis hendrerit, lectus id ultrices tincidunt, urna tellus convallis quam, eget vehicula ipsum arcu vitae nulla. Etiam tristique varius enim nec volutpat. Fusce non odio nec massa placerat aliquam id eu ligula. Nam nulla urna, iaculis sit amet nisi non, auctor congue magna. Suspendisse potenti. Duis vehicula consectetur feugiat.
Quisque ut luctus diam. Aliquam quis blandit eros. Vestibulum dolor velit, egestas non vehicula et, viverra in lacus. Donec luctus id libero at tincidunt. Donec in euismod tortor, id fermentum mi. Phasellus leo dui, placerat sed enim elementum, aliquet convallis mauris. Duis cursus mauris vehicula tortor auctor faucibus. Praesent euismod enim eget luctus facilisis. Donec condimentum, neque id convallis consectetur, lorem ipsum gravida nisl, vel fermentum lectus diam at magna. Aenean in urna sagittis, condimentum magna nec, egestas neque. Nulla gravida neque massa.
Nulla consequat, quam at fringilla mollis, nunc magna dapibus eros, ut ultrices sapien mauris eu libero. Duis sollicitudin orci posuere est vulputate, eu vestibulum mi vestibulum. Etiam eu elementum nisi, consectetur accumsan turpis. Sed dignissim sapien et posuere interdum. In adipiscing gravida enim vestibulum suscipit. Aliquam aliquet sem et dapibus mollis. Praesent quis lorem augue. Donec facilisis justo vel est pharetra, eget rhoncus magna ultricies. Suspendisse ac justo quis dui accumsan dignissim at non sapien. Cras vitae ultrices justo, quis venenatis nibh. Sed vestibulum adipiscing enim non volutpat. Duis ac euismod sapien. Pellentesque sit amet ornare velit. Duis venenatis tempus facilisis.
Sed sem lectus, mattis ut nunc sit amet, dictum sollicitudin sapien. Integer vitae ornare tellus. Vestibulum et cursus urna, vel aliquet mi. Duis lacinia tincidunt lorem. Cras sem felis, bibendum eu lorem luctus, dictum imperdiet augue. Quisque eleifend lectus pellentesque arcu faucibus tempus. Etiam sollicitudin in est eu lacinia. Curabitur faucibus in neque et imperdiet. Mauris libero enim, suscipit sit amet odio eget, molestie ornare ligula. Nam a lorem convallis, ornare nibh id, viverra tellus.
</div>
<footer>
Page footer
</footer>
</body>
</html>
here is the demo. Thanks a lot.
There you go: http://jsfiddle.net/8cxvr/2/
It's pretty simple, just give the footer a fixed position (= relative to window) and the container gets some margin on the bottom.
Relevant changes:
.footer {
position: fixed;
bottom: 0;
}
.container {
margin-bottom: 200px; /* footer-height */
}
To start, that is a horrible effect, please don't do that.
For a complete answer though, what they did is fixed the footer with positioning at the bottom of the page, and then gave it a lower z-index. So it's always at the position. Once you scroll past the content, the it comes into view. You can use a tool like IE Developer tools, or Firebug (for Firefox) to look at how they worked the code.