Fixing a div to the bottom of a page

Developer
Steve Pear
Size
2,671 Kb
Views
28,336
  1. Fixing a div to the bottom of a page Previews
  2. Fixing a div to the bottom of a page HTML Codes
  3. Fixing a div to the bottom of a page CSS Codes

How do I make an fixing a div to the bottom of a page?

This is an example from the blog article The complete guide to fixed divs at http://www.tipue.com/blog/fixed-divs/. What is a fixing a div to the bottom of a page? How do you make a fixing a div to the bottom of a page? This script and codes were developed by Steve Pear on 16 September 2022, Friday.

Fixing a div to the bottom of a page Previews
IQ Test

Fixing a div to the bottom of a page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fixing a div to the bottom of a page</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="fixed-div"><h1>Fixed div</h1></div><div class="text">Nonummy quis dolore ut in facilisis ex veniam ut euismod consequat adipiscing wisi, elit euismod tation nonummy duis, exerci nisl te. Iriure qui feugiat iusto iriure exerci commodo illum, consequat dolor vel vel luptatum, amet et ullamcorper ad ut. Tincidunt feugait erat at tincidunt, odio molestie feugiat delenit illum ad ex, te eum dolore, nisl wisi. Blandit esse zzril dolor, erat sit diam vulputate adipiscing ex vulputate, ullamcorper. Ea suscipit, et, vel eros, et minim feugiat, esse aliquip autem ipsum commodo dignissim lorem, eros quis et duis iusto, augue, dolore eu diam et in. Duis nisl esse eum lobortis ea consequat duis luptatum aliquam quis.<p>Consequat exerci dolor, veniam dolore dolor velit ut nostrud amet zzril. Autem facilisis iriure vel blandit illum at feugiat, feugiat. Eros volutpat ipsum in duis, ex, minim nisl aliquip. Facilisis, exerci wisi odio zzril nonummy blandit, consequat molestie nisl nulla luptatum vulputate, ea hendrerit odio, nostrud, at ut erat minim et enim, molestie accumsan in. Vel hendrerit lorem qui feugait nulla, duis delenit iusto molestie. Sed magna illum, sit dolore te vel feugait dolore ut ullamcorper suscipit, luptatum veniam feugait accumsan lobortis vulputate odio facilisis in consequat, illum ullamcorper. Ad nisl eum et ad feugiat ullamcorper dolore accumsan.</p><p>Erat et augue nulla lobortis wisi laoreet accumsan vero feugiat ut luptatum consequat blandit aliquip eu iriure quis dolore sit zzril. Augue aliquam dignissim et, commodo commodo, consequat eu, delenit, consequat at, consectetuer tation nulla iriure dolore. Nostrud facilisis praesent dignissim autem nulla dolore magna te vel et diam nisl, eros in lorem in. Ex lobortis tation, dolor dolor, facilisis ut commodo enim iriure euismod augue ad molestie autem velit eum. Ea lobortis consectetuer adipiscing volutpat, minim, vel, quis hendrerit, vel te quis suscipit.</p><p>Vel hendrerit lorem qui feugait nulla, duis delenit iusto molestie. Sed magna illum, sit dolore te vel feugait dolore ut ullamcorper suscipit, luptatum veniam feugait accumsan lobortis vulputate odio facilisis in consequat, illum ullamcorper. Ad nisl eum et ad feugiat ullamcorper dolore accumsan. Autem erat nibh vero amet, adipiscing eum duis iusto augue duis ea blandit eros in dolore.</p><p>Esse quis dolore sit zzril eros aliquam dignissim et, commodo commodo, consequat eu, delenit, consequat at, consectetuer tation nulla iriure dolore iusto. Amet praesent dignissim autem nulla dolore magna te vel et diam nisl, eros in lorem in. Vel velit hendrerit volutpat volutpat dolore commodo dolore duis, vero tation suscipit autem qui nulla odio at.</p><p>Enim te quis suscipit dolor vel hendrerit consequat ex diam hendrerit ad et in odio. Magna eu nulla ullamcorper aliquip vulputate ut esse facilisi te. Suscipit esse, nostrud qui veniam, praesent euismod at vero praesent duis exerci aliquam nibh, ad. Eum vel illum dignissim, vulputate tation augue laoreet, autem et augue nulla lobortis wisi laoreet accumsan vero feugiat ut. Blandit consequat blandit aliquip eu iriure quis dolore sit zzril eros aliquam dignissim et, commodo commodo, consequat eu.</p></div>
</body>
</html>

Fixing a div to the bottom of a page - Script Codes CSS Codes

body
{ height: 900px; font: 16px/1.6 "Open Sans", sans-serif;
}
h1
{ font: 18px/1.6 "Open Sans", sans-serif; color: #333;	text-transform: uppercase;	letter-spacing: 2px;
}
.text
{ padding: 100px;
}
.fixed-div
{ position: fixed; bottom: 0; left: 0; width: 100%; padding: 10px 0; text-align: center; border-top: 1px solid #e2e2e2; background-color: #fff;
}
Fixing a div to the bottom of a page - Script Codes
Fixing a div to the bottom of a page - Script Codes
Home Page Home
Developer Steve Pear
Username Tipue
Uploaded September 16, 2022
Rating 3
Size 2,671 Kb
Views 28,336
Do you need developer help for Fixing a div to the bottom of a page?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Steve Pear (Tipue) Script Codes
Name
Fixing a div, basic
An example of z-index and stacking order
Centering a div within a div, inner div responsive
Flexbox, div centered
Backgrounds and the vh unit
Backgrounds and the vw unit
Flexbox, big third
Flexbox, big third, third gone
Flexbox, flexible footer
Centering a div in a page, responsive
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!