<FixedBottom> Svelte Component: Generates an always visible content on the bottom of the page

*<FixedBottom> Svelte Component.md

<FixedBottom> Svelte Component

It generates an always visible content on the bottom of the page. You can use it to add buttons, messages, etc that are always visible.

For usage examples see the Svelte REPL: https://svelte.technology/repl?version=2.15.3&gist=7c741d58745e2cd27dde18ce6a8cd384

App.html

<!-- this component should come last on the page, in order to have the spacing correctly set --> 
<div id="content" ></div>
<FixedBottom>
  <button>Press Me...</button>
</FixedBottom>

<script>
//an experiment to include another HTML file
	import loremIpsum from "./LoremIpsum.html"
	setTimeout(function(){
  	new loremIpsum({
  		target: document.querySelector("#content")
  	})	
	},0)
	
  export default {
     components: {
			 FixedBottom: "./FixedBottom.html"}
   }
</script>

data.json5

{}

FixedBottom.html

<div class="fixed-bottom">
	<div ref:fixed class={class} id={id}>
		<span>
			<slot></slot>
		</span>
	</div>
</div>

<style>
	ref:fixed {
		position:fixed;
		left:0; 
		right:0;
		bottom:0;
		height:2rem;
		background: #ddd;
		text-align: center;
	}
	ref:fixed:before {
		content: "";
		display:inline-block;
		height: 100%;
		vertical-align: middle;
	}
	ref:fixed > span {
		vertical-align: middle;
	}
	.fixed-bottom {
		height:2rem;
		width:100%;
	}
</style>

<script>
	export default {
		data(){return {
			"class":"",
			id:""
		}}
	}

</script>

LoremIpsum.html

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Donec vitae arcu. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Fusce nibh. Sed ac dolor sit amet purus malesuada congue. Integer lacinia. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Fusce nibh. Curabitur sagittis hendrerit ante. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. In convallis. Nullam dapibus fermentum ipsum. Integer in sapien. In rutrum. Et harum quidem rerum facilis est et expedita distinctio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu.</p>

<p>Etiam bibendum elit eget erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque pretium lectus id turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin in tellus sit amet nibh dignissim sagittis. Praesent dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Suspendisse nisl. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam quis nulla. Praesent vitae arcu tempor neque lacinia pretium.</p>

<p>In rutrum. Curabitur sagittis hendrerit ante. Nullam faucibus mi quis velit. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec iaculis gravida nulla. Duis condimentum augue id magna semper rutrum. Curabitur vitae diam non enim vestibulum interdum. Integer vulputate sem a nibh rutrum consequat. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Maecenas lorem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero.</p>

<p>In enim a arcu imperdiet malesuada. Nulla non arcu lacinia neque faucibus fringilla. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Etiam egestas wisi a erat. Aenean vel massa quis mauris vehicula lacinia. Phasellus rhoncus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Nulla non lectus sed nisl molestie malesuada. Integer vulputate sem a nibh rutrum consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Maecenas aliquet accumsan leo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer imperdiet lectus quis justo. In convallis. Quisque tincidunt scelerisque libero. Maecenas libero.</p>

<p>Cras elementum. Nullam eget nisl. Maecenas aliquet accumsan leo. Mauris elementum mauris vitae tortor. Duis viverra diam non justo. Integer malesuada. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Pellentesque ipsum. Etiam neque. Aenean id metus id velit ullamcorper pulvinar. In convallis. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Nam quis nulla. Phasellus et lorem id felis nonummy placerat. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Aenean vel massa quis mauris vehicula lacinia. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Duis risus.</p>