Jump to content

how to keep my header and footer on screen when scrolling horizontally.


Pain

Recommended Posts

The following is how I would go about doing it in CSS:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.clearfix:before, .clearfix:after {	content: " ";	display: table; }
.clearfix:after {	clear: both; }
.clearfix { *zoom: 1; }
body { font-size: 100%;	padding: 0;	margin: 0; }
div.header_box {
	position: fixed;
	top: 0;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 60px;
	z-index: 200;
}
div.header {
	width: 100%;
	max-width: 978px;
	height: 60px;
	text-align: center;
	background-color: #000;
	z-index: 200;
	padding: 0;
	margin: 0 auto;
}
div.container {
	position: relative;
	top: 60px;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 978px;
	height: auto;
	background-color: orange;
	z-index: 100;
	padding: 10px 30px;
	margin: 0 auto;
}
h1 {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1.4rem;
	color: #fff;
}
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2rem;
	line-height: 1.5;
	color: #fff;
}
</style>
</head>

<body>
<div class="header_box">
  <div class="header clearfix">
    <h1>My Website</h1>
  </div>
</div>
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, vel aut ex suscipit. Fugiat, nam, doloribus, sint atque obcaecati saepe voluptatum ullam ad reprehenderit nihil dolor numquam quod voluptate dicta non laborum debitis repudiandae consequuntur architecto ab laudantium incidunt porro sed repellendus ducimus magni deserunt voluptatem laboriosam quam deleniti assumenda eum cumque aut voluptates inventore minus in illo nobis unde magnam! Nulla, ipsa, architecto eligendi voluptatem minus incidunt deserunt nam molestias non veritatis. Voluptatem, nulla, harum, aperiam quia possimus ut suscipit recusandae quasi laboriosam vero pariatur et. Deserunt, aut, nesciunt modi suscipit est voluptatibus odit sequi. Quis, repellendus, iste, nobis maiores laborum enim aliquid veniam ab amet tempore aut hic error dolor. Fugiat, iure, dicta sit ipsa totam qui similique distinctio rem sunt deserunt voluptatibus accusantium recusandae cumque voluptatem pariatur repudiandae molestiae illum quisquam repellat vitae esse commodi ipsum unde provident sed. Quasi, eius, possimus, sequi velit distinctio totam debitis suscipit necessitatibus optio sit accusamus quia et alias obcaecati commodi voluptas magni dolorem assumenda iusto quam rerum sunt cumque ea libero ab doloribus quae fuga ducimus eligendi sed temporibus fugit officia illum quis esse placeat perspiciatis asperiores omnis odit quo sint itaque. Doloremque, expedita dignissimos optio atque nihil architecto esse quisquam eius sapiente aperiam odio sequi sit! Dolore quis recusandae omnis voluptas totam accusamus soluta tempore iste earum beatae! Voluptatem suscipit error officiis mollitia placeat aliquid similique deserunt fuga corrupti sequi. Optio, consequatur, pariatur, accusamus eligendi quidem nam distinctio qui dolorum tempora possimus consequuntur hic sunt iusto animi earum. Fugiat, iusto, harum, similique assumenda laudantium maiores fuga quidem error deleniti distinctio praesentium perspiciatis temporibus quia perferendis tempore commodi ratione. Fugit, exercitationem, earum nihil omnis nulla blanditiis temporibus obcaecati voluptatibus molestias dolorem porro unde quas! Nobis, temporibus, magnam sit et eos nemo omnis nulla laborum excepturi labore quisquam id iusto in.</p>
  <p>Quaerat, enim quod facere quos rerum modi saepe cumque voluptatum rem illum reprehenderit fugit mollitia praesentium sapiente dignissimos quis ea. Dolore reiciendis consequuntur necessitatibus placeat quae. Reiciendis, eum, blanditiis, aut quam amet corporis facilis autem maiores mollitia neque illo voluptatem architecto? Eos, esse, amet ipsum qui non laudantium quo molestias nam illum eius quia molestiae. Aspernatur, minus reiciendis cumque possimus eos eum repellendus doloribus voluptates debitis officiis eveniet tempora harum ea dignissimos eaque in nihil exercitationem culpa eligendi unde accusamus ratione dolores illum consectetur magni id nesciunt porro inventore ipsum voluptate fugit sint consequatur cupiditate accusantium quisquam mollitia officia perferendis libero et saepe optio ab aperiam ducimus laudantium laborum fuga! Ex, quia nisi reprehenderit illum sit accusamus hic debitis magnam. Repudiandae, blanditiis, molestias, et iure culpa itaque aperiam provident nam veniam nulla ullam reprehenderit! Ullam, et, amet, reiciendis eos minima at quaerat excepturi adipisci error iure repellat dolore asperiores fugit nostrum eaque unde explicabo quisquam dolorum dignissimos in natus eveniet magni. Esse, velit atque id architecto possimus reiciendis dolorum sapiente non libero repellat ipsam facere aperiam! Quo, reiciendis asperiores officiis quos veniam iusto explicabo natus et tempore ut. Aspernatur, eaque, asperiores optio placeat sunt et unde at labore molestias tenetur impedit rerum quo quod aliquid ipsa excepturi ab iste adipisci mollitia quibusdam esse autem rem cumque voluptatem saepe quae aperiam laudantium ratione ipsam iure voluptatibus libero recusandae facere. Quasi, aliquam, ipsa expedita delectus sit eveniet nesciunt fuga in omnis accusantium vero inventore placeat voluptatibus voluptates repellat eum quia possimus vel eligendi maxime veniam laborum ea est ut numquam! Necessitatibus, esse, enim, accusantium dolorum obcaecati aut praesentium harum laboriosam maxime doloremque magnam amet ea quae. Nihil natus voluptatum aliquid laboriosam itaque voluptates recusandae ea fuga. Nostrum, nesciunt, alias, explicabo quod vero molestias voluptatem deserunt repudiandae a totam quam porro consequuntur ex.</p>
  <p>Labore, sit, voluptate voluptatibus corporis error id harum neque distinctio quasi fuga unde tenetur ipsum illo nobis fugiat quis beatae? Ex, architecto, consequatur recusandae sint eaque nobis atque provident qui. Eveniet, unde nemo necessitatibus ab ducimus eligendi fuga maxime nesciunt magni architecto vel omnis consequatur ipsa! Unde, aliquam, ipsum, id, quis similique nisi sunt tenetur qui optio excepturi natus nemo eos porro sint iusto molestias placeat totam numquam. Modi, harum velit reprehenderit vero quaerat nihil veniam. Tenetur, quidem ea debitis pariatur libero consectetur beatae fugit optio accusamus itaque laborum accusantium voluptatem blanditiis culpa corporis animi voluptates quo est laudantium velit iure necessitatibus hic voluptate! Laudantium, hic omnis dolorem sunt deleniti dolore rem doloremque provident neque molestiae. Non, vero, voluptas facere ad ea debitis sunt saepe eaque quasi sapiente delectus provident cupiditate eligendi! Accusantium, aperiam, harum voluptas veritatis atque deleniti ratione asperiores nam consectetur aut delectus error tempora ullam adipisci neque debitis quos repellat? Incidunt, facere, amet, ipsum, possimus adipisci minus aliquid repellendus voluptatum accusamus maxime vitae error consequatur doloribus soluta commodi et ducimus tenetur cumque qui suscipit in voluptates iure mollitia saepe eaque sunt sapiente laborum molestias odit iusto. Quisquam officia nisi perferendis ex quibusdam quam odit quis aspernatur suscipit voluptates? Velit, nemo, perspiciatis, eius, quas quae alias rerum id ut inventore cum quo corrupti quia veniam ea labore sapiente veritatis voluptatem dolorem excepturi aliquam asperiores nam officiis quod nihil eaque voluptates error non aperiam libero voluptas. Vel, itaque, dolore, veniam ea asperiores mollitia magni sit est tempore distinctio id veritatis! Quaerat, cum, optio aspernatur consequatur dolore repellat sequi vero saepe sed odit quidem magni animi debitis ullam et veritatis perspiciatis obcaecati incidunt odio provident. Quo, ea, quam tenetur corporis a eos voluptate odit ab quidem laudantium nostrum molestias est laboriosam similique architecto ratione assumenda quasi nemo perspiciatis unde aspernatur?</p>
  <p>Id, accusantium, animi eaque minus illum ut unde molestiae accusamus quidem quasi ea iure rem natus velit nostrum cupiditate beatae voluptates assumenda numquam labore odit eos veritatis nesciunt sint soluta porro eius quae commodi voluptatum nihil neque laboriosam esse illo temporibus ab tempore recusandae officia repellat autem ex alias vero sapiente consectetur blanditiis reprehenderit repudiandae. Molestiae, accusamus, cupiditate, fuga consectetur id dolores distinctio illo recusandae obcaecati voluptates totam eius quasi voluptas soluta tempore consequuntur aliquid quidem cumque temporibus earum impedit nulla eaque. Magnam, error, beatae, et at voluptates excepturi perferendis perspiciatis consectetur quaerat sit voluptatibus laudantium tenetur amet eum officiis aperiam ipsam voluptas deleniti quos dolor assumenda mollitia blanditiis dolorum facere impedit fugit obcaecati debitis delectus ipsum incidunt provident vero earum iusto. Ipsam, maiores aut! Autem, ducimus, possimus deserunt unde deleniti dolor illo aperiam accusamus incidunt obcaecati tempora dicta aliquid atque culpa eveniet illum ab! Fuga corrupti dolorem culpa nihil libero quos autem. Iure beatae nam modi asperiores commodi. Esse, excepturi dolor doloremque ut corporis. Nostrum, sit, doloribus, eum, soluta dolores impedit obcaecati perferendis blanditiis magni tempora autem consequatur officiis aspernatur itaque voluptatibus ratione laboriosam cumque eos! Odit, fugiat, doloribus nulla iusto neque alias voluptatem numquam suscipit minus dignissimos necessitatibus fuga perferendis quidem nemo illum sed accusantium nostrum maiores in excepturi porro blanditiis eos vero aspernatur labore recusandae soluta reiciendis ab iure illo autem assumenda eveniet vel. Harum, incidunt, iure velit ex cupiditate obcaecati quod corporis enim consectetur molestiae deleniti nesciunt earum numquam assumenda temporibus dolor amet voluptatum sed explicabo ratione dolorem accusamus beatae veniam qui quia animi ab. Laudantium, eius impedit sunt nemo cupiditate veritatis commodi. Repellendus, mollitia, adipisci velit nisi esse eos at ducimus natus magni doloribus neque sunt quis commodi soluta quisquam reiciendis aut! Consequatur, accusantium, natus quia ducimus sunt repellat facilis excepturi libero atque non dolores!</p>
  <p>Quasi, aliquid, quos, earum, nihil sint commodi sed temporibus voluptate reiciendis est porro perspiciatis optio ullam! Ea, velit, temporibus, molestiae vel asperiores dolorum obcaecati pariatur aspernatur ab eveniet sunt placeat quasi tempore sint cumque mollitia debitis expedita. Debitis, magni provident autem et optio dolorem impedit enim nulla a sed. Sit, commodi, vero, tempora facere amet beatae ex nisi illum iure vel a labore mollitia architecto ab sint odio saepe earum deserunt dignissimos veritatis similique adipisci optio possimus et blanditiis eveniet voluptatibus officiis magnam aspernatur eligendi pariatur dolor dolorum minus officia odit praesentium accusamus. Minima, dolorem, doloremque, sed voluptatum vitae veritatis eaque soluta itaque architecto quisquam deserunt dolores? Eligendi in repudiandae odio adipisci perspiciatis quidem nemo. Iusto, adipisci, blanditiis tempore earum quo numquam vel quasi voluptatum necessitatibus illum fugiat odio dignissimos explicabo odit labore praesentium sunt! Dolorem, iure, praesentium, quod, blanditiis id ullam repellat quae quis necessitatibus pariatur expedita error quaerat earum reiciendis illum sequi maxime enim autem repellendus adipisci voluptas porro facere aut fuga dolorum omnis optio aspernatur ab asperiores modi! Aut, quae molestiae sunt quibusdam fugit ullam. Possimus, nam commodi nostrum aliquid sint non natus. At, voluptate, ad repellat repellendus cumque temporibus maiores deserunt voluptas eaque dicta est atque ab aspernatur delectus illum explicabo ut reprehenderit fugiat voluptates enim. Harum, similique, deleniti, maiores, fuga porro vel id optio aperiam dolorem aliquid odit enim magnam ipsam amet accusamus quas nihil sit saepe nobis ipsa quo suscipit odio molestiae nam modi. Molestias, amet, suscipit blanditiis deserunt officiis consequuntur sint voluptate dolorem earum repudiandae. Iusto, veniam autem nihil commodi animi illo voluptate error labore. Officiis, eaque, magnam, reiciendis omnis dolore veritatis doloremque odio maxime totam ducimus rem voluptatum quibusdam consequuntur dolorum officia sed consequatur architecto quam quo perspiciatis velit facilis laboriosam ex repudiandae hic. Amet, quae tempore similique repellat sit quam odio!</p>
</div>
</body>
</html>

I didn't do the footer, but it's the same principle except that position would be at the bottom instead of the top. ;D  

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.