Develop Reference

Using position: fixed in css print media queries? [duplicate]

This question already has answers here:
How to use HTML to print header and footer on every printed page of a document?
(23 answers)
Closed 4 years ago.
We want to get a footer to appear on each printed page and using position: fixed adds the footer to each page. The only problem is that content on the page can flow under the footer.
Is there a way to prevent printed page content from flowing under a position: fixed footer?

body {
margin: 0;
}
.content {
padding: 30px;
font-size: 18px;
background: #ccc;
padding-bottom: 60px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background: #f89;
}
footer div {
padding: 20px;
}
.last-content {
color:red;
}
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus ex odio, in bibendum odio aliquam nec. Phasellus suscipit in mi eget pretium. Etiam pellentesque est ac nunc ullamcorper dapibus. Maecenas viverra tristique erat, ac fringilla est placerat a. In non porta metus. Integer tincidunt mollis quam, ut vestibulum orci tempor eu. Vestibulum rutrum est vitae porta tristique. Fusce dui libero, luctus et leo quis, euismod tincidunt ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque ut fringilla felis.
Nulla at erat nulla. Aenean ut elementum sem, sed fringilla neque. Quisque dolor dui, varius eget tempus vitae, scelerisque interdum lectus. Suspendisse ut ante maximus, accumsan urna at, vehicula purus. Aenean auctor justo in viverra varius. In malesuada, turpis egestas aliquet mollis, magna nisi dignissim libero, vitae bibendum elit risus ut eros. Aenean quis metus eget odio egestas ornare. Maecenas malesuada nulla ligula, ut sagittis est finibus eget. Donec nec ullamcorper nunc. Fusce elementum urna et neque aliquet volutpat. Morbi convallis luctus facilisis.
Suspendisse et ipsum nec odio maximus placerat eget in nisi. Vivamus gravida, velit non euismod mollis, nisi lectus sodales leo, et elementum odio elit quis lectus. Ut efficitur vitae neque in malesuada. Nam varius malesuada metus, id lobortis orci ultrices vitae. Duis iaculis libero eu metus feugiat consectetur. Maecenas scelerisque et turpis at ultrices. Morbi vehicula eu dolor eget porttitor. Maecenas leo enim, tempus vel mi ut, eleifend venenatis ante. Proin id aliquam metus. Nullam non lorem ut odio molestie finibus pharetra ullamcorper enim.
Aliquam egestas purus libero, et lacinia nisl semper at. Integer a ornare orci. Pellentesque porta, purus nec consectetur sollicitudin, nunc lectus tincidunt eros, a dictum libero augue et elit. Integer quis ultricies lectus. Nunc eu eros venenatis, euismod mi at, maximus augue. Vestibulum ut aliquam neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus scelerisque velit ante, id tempus quam auctor nec.
Integer vitae nibh id ipsum ultrices hendrerit. Maecenas tempus arcu enim, aliquam feugiat mauris finibus sit amet. Quisque elementum risus eros, tincidunt suscipit velit fermentum ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras nec fermentum quam. Integer quis tempus nunc. Curabitur in massa ac lorem pellentesque porta. Phasellus finibus lorem est, at cursus sem imperdiet at. Cras nunc lacus, dictum vitae finibus et, porttitor id nisi. Integer bibendum imperdiet urna, eget sollicitudin erat <span class="last-content">last content</span>
</div>
<footer>
<div> here is footer block </div>
</footer>
That is how CSS behave when position fixed. You should add margin-bottom for the main block(parallel block before the footer)
margin-bottom == footer height

.content {
margin-bottom: 50px;
/*same height as footer*/
}
.footer {
height: 50px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: yellow;
}
<div class="content">
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p style="color: red">BOTTOM CONTENT</p>
</div>
<div class="footer">
FOOTER
</div>

Well, it looks like the content is ignoring the block of your footer and being rendered under it somehow.
Maybe you can add display: inline-block; to your CSS so the footer occupies a full line without being surpassed.

Viewheight on Chrome Mobile

I have a popup window, that is a div. It shouldn't go out of the screen, so I added an other div that is scrollable to facilitate the content if it's longer than the screen height. I can set the inner divs max-height in javascript like this (because I have content before it, so I don't know where it starts.):
var rect = container.getBoundingClientRect();
container.style.maxHeight = "calc(100vh - " + rect.top + "px - 15vh)";
This approach works on computers, but on smartphones in Chrome, the viewheight is more than what the user actually sees, because the url bar takes up space, so when that bar is shown, the end of the div is out of the screen. So how can I make the div end "15vh" from the actual bottom of the screen.
My code:
var container = document.getElementById("container");
var rect = container.getBoundingClientRect();
container.style.maxHeight = "calc(100vh - " + rect.top + "px - 15vh)";
body {
background-color: black;
}
#popup_content {
position: relative;
margin: auto;
background-color: red;
width: 80%;
max-width: 500px;
}
#container {
overflow: auto;
max-height: 50vh;
}
<div id="popup_content">
<p>some content</p>
<div id="container">
A lot of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, est vel congue eleifend, ante tortor ultricies leo, eu consectetur magna odio ac nibh. Nulla laoreet odio dui, ac aliquet purus porttitor et. Aliquam blandit vestibulum mauris, vel eleifend diam ultrices in. Vivamus eget eleifend dui. Cras aliquet libero et lorem venenatis ultricies. Vestibulum pulvinar erat eget velit porta, a gravida nunc scelerisque. Aliquam ut varius nibh. Aenean volutpat imperdiet nibh quis vestibulum. Donec eget magna varius, tempus augue ac, auctor ipsum. Vivamus quis egestas mauris. Vivamus dapibus risus hendrerit viverra ullamcorper. Pellentesque sodales elementum leo, sit amet ultricies elit rhoncus eu. Phasellus consectetur sit amet sem at mattis. Aliquam finibus risus ut ante pharetra, ut condimentum ligula convallis. Maecenas hendrerit, ligula at finibus pellentesque, justo ante varius metus, a luctus libero dui ut risus. Pellentesque dictum, risus ut fermentum tincidunt, purus massa dictum lectus, id aliquam neque risus at augue. Phasellus laoreet fermentum elementum. Donec sit amet aliquam neque. In consequat nec augue aliquam congue. Suspendisse purus neque, luctus vel placerat sed, pellentesque eget neque. Morbi tincidunt iaculis neque in imperdiet. Donec id tortor nunc. In lacinia rhoncus lectus, vitae feugiat felis egestas at.
</div>
</div>

Issues with my jQuery match height

I am having issues with my jQuery match height... or maybe I just don't understand it fully? Any Help?
Image 1
Image 1: This is how it looks without height matched, which i am happy with just some simple shadowed boxes. But they do not match each others height :/
Image 2
Image 2: This is how it looks currently when I am trying to apply my jQuery of match height. The shadowed boxes are tiny at the top and it pushes the content underneath them...
HTML:
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan, mi a auctor varius, nibh metus aliquet nisl, sit amet aliquam massa ipsum vitae magna. Praesent sed quam felis. Phasellus pretium tempus sapien, eu interdum turpis ultricies quis. Nam dictum nisl et nulla scelerisque venenatis. Fusce sit amet aliquam.
</div>
</div>
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Vestibulum eget sodales orci. Quisque non semper enim. Mauris suscipit malesuada nisi sit amet tincidunt. Aliquam quam arcu, imperdiet ut tortor a, rhoncus aliquam leo. Nam ullamcorper elit vitae porttitor semper. Praesent cursus id felis nec eleifend. Ut vel sapien eleifend, efficitur metus eget, lacinia leo. Fusce eu lacus pretium, pulvinar tellus vel, vestibulum dui. Nunc congue libero justo, at aliquet ipsum posuere scelerisque. Praesent nunc lorem, venenatis eu velit sed, volutpat efficitur sem. Integer nisi arcu, sodales eu dignissim et, sagittis in massa. Aenean fringilla ante sed elit convallis, ac ornare urna porta. Pellentesque vel diam luctus, accumsan metus eu, malesuada elit.</p>
</div>
</div>
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Aenean a mi quis justo ultricies posuere nec vitae lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec felis ante. Nulla aliquet in augue id varius. Cras ut ligula a diam porta feugiat. Praesent dictum eros nisl, at interdum tellus suscipit vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$(".fade").hide(0).delay(0).fadeIn(500)
$('div').each(function(){
var highestBox = 0;
$('.home-card', this).each(function(){
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.home-card', this).height(highestBox);
});
});
CSS:
.home-card {
box-shadow: 1px 0 11px rgba(33,33,33, 0.2);
padding: 5px;
margin-top: 6px;
width: 97%;
float: none;
position: relative;
left: 0.5%;
}
.home-card:hover {
box-shadow: 1px 0 11px rgba(33,33,33, 0.4);
}
.home-card p, h2 {
padding: 10px;
}
Any Ideas?? Thanks!
ALSO: How would I get it so that height matches on large screens only, and is unaffected on medium and small screens?

Have you considered using a CSS only solution?
You could wrap your columns in a container, let's use a div with a class of container. Make this container a flexbox container and child divs within it will be matching heights.
.container {
display: flex;
}
I prefer using CSS for this type of problem because it's more of a presentational concern and this approach doesn't necessitate writing any messy javascript to manipulate the DOM. Additionally, unless you need to support old versions of IE, browser support for flexbox is pretty good. http://caniuse.com/#search=flexbox
I added a border to the child divs with a class of column simply to illustrate that they are indeed the same height.
https://jsfiddle.net/eulloa/tx5jbdgf/1/
This is a pretty good reference on flexbox, in case you're interested in reading more.

Why the first div looping?
Just the second loop should do what you want.
var highestBox = 0;
$('.home-card').each(function(){
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.home-card').height(highestBox);
Because if there is another div having no .home-card child... Like a footer...
highestBox sets to 0.
Then all .homecard are setted to zero.
What you actually see as height probably is margin/padding of inner elements... or something.

Hide the content under transparent fixed navbar while scrolling down

the problem:
I have transparent fixed navbar with some gap (margin-top) and below content, which is located under the navbar while scrolling down globally. The problem is that navbar is transparent and the background of the page is a dynamic slideshow of different images so I can't use z-index and hide it by changing background color or put image same as background..
In conclusion:
Transparent fixed navbar with gap
Dynamic images background
It has to be global scrolling (can't use scrolling for div content)
I'am using bootstrap 3
Drawings:
WRONG: [How its looks now][1]
RIGHT: [How it should be][2]
[1]: http://i.stack.imgur.com/Iwc1h.png
[2]: http://i.stack.imgur.com/f1Sbd.png
Sorry for problems with understanding me, here is code:
http://jsfiddle.net/5myw4e26/

if you're using a position fixed at your navbar you can do a top div empty with float left and a height with the size of your navbar.

I managed to accomplish what you we're trying to do. It's probably not the best solution, but it works.
Using JQuery I calculated when a paragraph (p.content) and the navigation-bar collided.
There's more than enough to finetune, so you can adjust it to your needs.
JQuery
$(document).ready(function() {
$(document).scroll(function() {
$("p").each(function() {
if ($(this).offset().top <= $(document).scrollTop() + 32) {
$(this).css("opacity", "0");
} else {
$(this).css("opacity", "1");
}
});
});
});
Note that the 32 in $(this).offset().top <= $(document).scrollTop() + 32 is the height of the navigation bar.
Example:
$(document).ready(function() {
$(document).scroll(function() {
$("p").each(function() {
if ($(this).offset().top <= $(document).scrollTop() + 32) {
$(this).css("opacity", "0");
} else {
$(this).css("opacity", "1");
}
});
});
});
body {
margin: 0px;
font-family: Arial;
font-size: 12px;
min-height: 2000px;
}
nav {
width: 100%;
height: 32px;
line-height: 32px;
text-align: center;
position: fixed;
top: 0;
border-bottom: 1px solid black;
}
p.content {
margin: 12px 0px 0px 0px;
background: yellow;
}
p:first-of-type {
margin: 44px 0px 0px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wrapper">
<nav>
Navigation Bar
</nav>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed dolor metus. Morbi tristique nisl vel lectus rutrum, non ultricies dolor feugiat. Fusce nec dolor in purus consectetur lacinia non sit amet turpis. Donec facilisis tortor mauris, nec vulputate
massa fermentum vel. Praesent in neque quis lacus hendrerit tincidunt sed et dolor. Nullam fermentum, orci at pulvinar imperdiet, lacus libero facilisis ante, sit amet venenatis sem tortor in nibh. Ut ullamcorper porta fermentum. Praesent faucibus,
erat eget iaculis porttitor, purus purus posuere nulla, eget lacinia odio libero in lectus. Vivamus sem ex, commodo ac tortor ut, fringilla vulputate eros. Ut iaculis augue non ipsum porttitor ornare.</p>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis tellus luctus ornare hendrerit. Curabitur hendrerit justo ante. Maecenas scelerisque ligula condimentum, aliquam tortor sit amet, aliquam lacus. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Ut ut augue vel massa tempus laoreet. Nulla porttitor, sem ac aliquet facilisis, purus ligula pulvinar ipsum, quis volutpat enim elit sed ante. Pellentesque quis diam vestibulum, viverra elit at, sollicitudin mi. Vivamus
vehicula ex eu justo feugiat, a ullamcorper nisi commodo. Phasellus sed tortor eget purus mollis tempor at sit amet libero. Fusce tincidunt est est, tristique pretium justo feugiat eget. Donec et lacus vehicula, aliquam sapien a, eleifend tortor.</p>
<p class="content">Vivamus vitae placerat elit. Integer eleifend nibh at purus suscipit rutrum. Aliquam et fermentum mauris. Aenean gravida velit a vehicula aliquet. Duis neque tortor, luctus eget condimentum eget, venenatis eget lorem. Maecenas sed ullamcorper tellus.
Donec euismod bibendum nunc, non ullamcorper neque cursus eget. Curabitur dapibus orci non quam vestibulum ornare. Aenean tincidunt interdum justo faucibus feugiat. Proin molestie lorem ultricies neque consequat, commodo cursus nisl molestie. Donec
gravida viverra nisl, consectetur laoreet libero interdum ac. Vivamus varius vestibulum quam eu rutrum. Pellentesque id rhoncus massa.</p>
<p class="content">Nunc finibus leo mollis efficitur tempus. Suspendisse ac elit lectus. Proin auctor ipsum faucibus arcu cursus congue. Nam rutrum odio non enim euismod auctor id in justo. Ut non sagittis orci, vel tincidunt elit. Mauris odio sem, varius eget tortor
at, commodo pretium massa. Cras sed rhoncus dolor, non dictum sem. Curabitur in imperdiet turpis, in imperdiet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas erat nisl, sagittis id eleifend ut, consequat eget orci. Aenean
blandit arcu non varius ornare.</p>
<p class="content">Pellentesque molestie consectetur lectus in iaculis. Curabitur efficitur ac nisi vitae eleifend. Morbi semper tristique ornare. Morbi in cursus mauris. Morbi et risus velit. Etiam lobortis commodo dolor, ac pulvinar dolor gravida vel. Donec sollicitudin
metus urna, eu consequat magna vehicula a. Vivamus interdum, enim non consequat ultrices, lacus enim vehicula ante, vitae tristique tellus nibh sit amet eros. Aliquam consequat eu orci id rutrum. Donec lacus eros, eleifend et viverra vitae, congue
at turpis. Quisque rhoncus fermentum ex sed lobortis. Fusce luctus, lorem vitae condimentum gravida, nibh tortor elementum nulla, id auctor nisl ex eu lectus. Donec auctor ligula sem, et porttitor neque eleifend vitae. Aliquam felis lacus, sollicitudin
laoreet dui mollis, scelerisque auctor metus.</p>
</div>

Fading effect between switching divs

I'm using http://tympanus.net/Development/PageTransitions/ for my main pages, the code below is used within a single page to showcase other different content info. All pages coded are in one index file.
The code below is used to switch between divs.
I tried using simple javascript onclick to make the pages fadeIn/fadeOut but it couldn't work.
jQuery:
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i = 0; i < sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container' + idInfo).style.display = 'block';
}
$("#fade").click(function () {
$('#container1').fadeOut('slow');
$('#container2').fadeIn('slow');
});
</script>
CSS:
<style type="text/css">
#container1, #container2, #container3 {
display:none;
width:100%;
height:auto;
}
</style>
HTML:
<img src="img/thumbnail1.png" /><br>click to see content 1
<img src="img/thumbnail2.png" /><br>click to see content 2
<img src="img/thumbnail3.png" /><br>click to see content 3
<div id="container1">content1</div>
<div id="container2">content2</div>
<div id="container3">content3</div>
Just need the .onclick fade effect to work after clicking on the link.
Many thanks in advance!

I think that this is what you are aiming for:
Online Demo
HTML:
<div class="links">
click to see content 1
click to see content 2
click to see content 3
</div>
<div class="content-divs">
<div>content0</div>
<div>content1</div>
<div>content2</div>
</div>
JavaScript:
$(".links a").click(function () {
var id = $(this).data('toggle');
showDiv(id);
});
function showDiv(id) {
// hide all other
var divs = $('.content-divs');
divs.children().each(function(index) {
$(this).hide();
});
// fade the correct one in.
divs.children('div:nth-child('+id+')').fadeIn();
}
Same css.
Since you are already using jQuery, why not use all it's functions?
You could do that with onclick="showDiv(id)", but jsfiddle does not work with that, so .data('toggle') is a nice workaround.

It seems you may be making this a little bit more complicated then it needs to be, try this out:
<script type="text/javascript">
$(document).ready(function(){
var curr = 1
$('.fader').click(function(){
var next_attr = $(this).data('num');
if(curr != next_attr){
$('div[data-num="'+curr+'"]').hide(1000, function(){
$('div[data-num="'+next_attr+'"]').show(1000);
});
curr = next_attr
}
});
});
</script>
Here is the html
<div class="links">
<a class=".fader" data-num="1">Show Container 1</a>
<a class=".fader" data-num="2">Show Container 2</a>
<a class=".fader" data-num="3">Show Container 3</a>
</div>
<div class="containers">
<div id="container1" data-num="1">Container 1</div>
<div id="container2" data-num="2">Container 2</div>
<div id="container3" data-num="3">Container 3</div>
</div>
and here is the css
#container2, #container3{
display:none;
width:100%;
height:auto;
}
that should give you the ability to switch between the 3 containers by clicking the links corresponding to them. I used a data attribute to link the containers to there links. When a link is clicked it looks for div with the same data-num and fades out the current one once its faded out it fades in the new one and sets the curr variable.

You can actually do this in pure CSS. (Not supported for IE 8-)
http://jsbin.com/eVeNeSO/1/edit
CSS:
body {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
background-color: #001;
}
/* Header Styling and Positioning */
#container ul {
list-style:none;
margin: 2em 0;
padding: 0;
text-align: center;
font-size: 1.5em;
}
#container li {
display: inline;
margin: 0 1em;
}
#container li a {
margin: 0 1em;
color: #09b;
text-decoration: none;
background: #333;
padding: .6em;
border-radius: 25em;
}
#container li a:hover {
color: #099;
background: #444;
}
#container li a:active {
color: #066;
background: #222;
}
/* Content Area */
.content div {
width: 50%;
margin: 2em auto;
padding: 1em;
background: #333;
border: 1em solid #555;
color: #fff;
}
/* hide unselected targets */
.content div:not(:target) {
display: none;
}
/* display selected target */
:target {
display: inherit;
}
HTML:
<article id="container">
<ul>
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>
<div class="content">
<div id="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at feugiat odio. Proin sit amet eros ac diam tempus tempor. Fusce gravida ut nisi in consectetur. Sed hendrerit sapien id metus adipiscing, id vehicula lacus fermentum. Proin mollis facilisis erat, eu sollicitudin diam scelerisque ut. Phasellus non mollis nisl. Vestibulum ac mi quis metus mollis fermentum. Donec pharetra consequat lacinia. Vestibulum porta tortor purus, non fermentum turpis congue eget. Nulla varius augue dolor, at pellentesque diam volutpat in. Vestibulum vitae ligula eu eros tristique accumsan. Mauris sagittis iaculis lorem id egestas. Suspendisse potenti. Cras faucibus dolor turpis, ac ultrices dolor rhoncus a.
<p>Etiam aliquam magna vitae hendrerit accumsan. Nam venenatis risus a tempor semper. Nullam ac est nec dolor pellentesque laoreet ac ac nisi. Ut sit amet magna nunc. Vestibulum orci ipsum, pretium nec venenatis vel, lacinia et magna. Proin dignissim dui ligula, eget pretium nisl ultrices eu. Etiam sit amet nunc non nisl scelerisque dignissim a sed sapien.</p>
<p>Quisque auctor sit amet mi sed porta. Fusce nec erat eros. Suspendisse et diam sit amet quam pretium sollicitudin quis nec enim. Nam fermentum risus dui, non volutpat dolor pellentesque nec. Quisque interdum, neque eu feugiat hendrerit, risus augue malesuada mauris, non vestibulum ante erat quis purus. Nunc scelerisque sapien vel leo bibendum, vel dapibus ipsum ultricies. Cras commodo lacus quis nunc eleifend iaculis. Nam adipiscing ipsum non justo ultrices, sit amet vestibulum urna vehicula. Praesent porttitor neque et dictum euismod. Aliquam erat volutpat. Nam adipiscing, neque ut dictum ultricies, dui odio aliquet dui, ac rhoncus neque nulla a enim.</p>
</div>
<div id="contact">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut purus leo, varius pellentesque vestibulum at, lobortis quis est. Suspendisse mattis leo vel eros faucibus adipiscing. Phasellus sed nisl eu lectus blandit dignissim vel id nibh. Donec rutrum felis urna, sed elementum urna venenatis quis. Praesent vel tortor sed felis sodales lobortis eget eget nulla. Aliquam bibendum elit eu nunc facilisis, varius tempor lectus mattis. Aenean sed aliquet orci. Aliquam viverra molestie ultrices.
<p>Nullam luctus imperdiet risus, vel convallis massa interdum id. In ultricies pulvinar libero vitae sodales. Fusce eleifend varius tincidunt. Nulla sed blandit nibh. Ut sollicitudin, metus et sagittis tincidunt, nisl felis ultricies ante, eu dapibus massa odio sed nunc. Pellentesque semper eros dui, ac mollis nunc dictum non. Quisque ultrices sapien at velit pellentesque, at lacinia est commodo. Morbi commodo in neque eu tempor. Curabitur eu mattis diam, eu tristique mauris.</p>
<p>Suspendisse sit amet lacus rutrum, faucibus augue vitae, euismod nibh. Mauris aliquet nisi in nibh aliquam, et ullamcorper turpis mattis. Vestibulum ut hendrerit libero, eu ultricies odio. Etiam sodales vehicula dignissim. Vestibulum libero tellus, luctus sed imperdiet quis, malesuada sed nunc. In aliquet pellentesque erat pellentesque fringilla. Aenean egestas ipsum eu nunc auctor, nec vestibulum est varius. Integer convallis, orci sit amet sagittis hendrerit, purus ligula dictum dolor, in lobortis ligula lacus pulvinar lorem. Sed pulvinar porttitor egestas. Duis ac ante ipsum. Donec sem odio, sollicitudin in fermentum egestas, gravida sed diam. Nam condimentum augue ut ligula dapibus sodales. Donec blandit sem non cursus aliquam.</p>
</div>
<div id="services">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere porta suscipit. In ac purus quis lectus blandit rutrum eu vitae nisi. Nunc vel ante at enim imperdiet ultrices et non erat. Vestibulum sagittis facilisis nulla. Ut quis turpis sit amet enim volutpat tincidunt. Vivamus vel ornare neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis tincidunt mi et ipsum cursus, vitae tincidunt ipsum fringilla. Integer eu mollis elit, in tincidunt neque.
<p>Maecenas ac est gravida, iaculis mauris vitae, tempus enim. Mauris ut nisi dapibus, commodo massa sed, iaculis augue. Cras sit amet leo libero. Mauris ac dui lorem. Aenean velit risus, ornare molestie neque ac, feugiat cursus tellus. Duis commodo lacinia felis, vitae aliquam mauris consectetur cursus. Donec arcu orci, sollicitudin eu lacus id, ultricies sollicitudin ligula. Vivamus ac egestas ipsum. Duis aliquam suscipit tristique. Vestibulum aliquet bibendum arcu, in adipiscing arcu sagittis ut. Aenean in leo risus. Morbi vitae nibh in eros accumsan consequat in ac lacus. Maecenas pretium mattis justo non euismod. Sed vel velit sollicitudin, posuere mi nec, dictum lectus.</p>
<p>Nullam nisl nisi, dignissim ultrices cursus id, aliquet vel purus. Praesent velit purus, pharetra id eros id, viverra ultricies velit. Phasellus sed lacinia neque, at dictum odio. Mauris eget accumsan augue, ac imperdiet magna. Proin commodo sem id purus vulputate mollis. Nunc a dignissim urna. Nam facilisis, lectus sit amet blandit egestas, velit tortor imperdiet massa, eu elementum lorem dolor nec diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus sit amet nisl turpis. Nulla vel nulla ut odio feugiat ultrices. Ut id consequat sem.</p>
</div>
</div>
</article>