Below is a <div> element with it's position property set to sticky:
<div style="position: sticky;"> </div>.
When I insert two sticky <div> elements in a page, they both stick to the top of the page, and stick, in that sense that sticky elements are working, however, they stick at the exact same spot and cover each other up. In my head I imagined that they would both get to the top of the page, when the user scrolls the page, and stick, but I thought they would stack, but as I stated, they don't, one just sits under the other.
Here is an extremely simplified version of my current project. I want the two blocks to stick, one right above the the other.
<html>
<body>
<div style="display: block; position: sticky; width: 100% height: 25px; background: #555">
DIV ONE #1
</div>
<div style="display: block; position: sticky; width: 100% height: 25px; background: #555">
DIV TWO #2
</div>
</body>
</html>
So my question is, how can I add two sticky <div> elements, to the same HTML document, and have one <div> stick to the top of the page when the user scrolls, and the other <div> stick to the bottom of the first <div>, rather than also sticking to the top of the page and covering the that stuck first, up?
To ensure that what I am saying is understood, I have added an interactive example.
Below, the example will show you what is happening within my project — Div Alpha is being covered by Div Beta, and I want Div Beta to stick to the bottom of Div Alpha, so that it doesn't block it.
<!DOCTYPE html>
<html>
<head>
<style>
.div-alpha {
display: block;
text-align: center;
position: sticky;
top: 0;
width: 200px;
height: 200px;
font-size: 30px;
border: 5px solid #FF20B0;
background-color: #000000;
color: #FF20B0;
}
.div-beta {
display: block;
text-align: center;
position: sticky;
top: 0;
width: 200px;
height: 200px;
font-size: 30px;
border: 5px solid #80E000;
background-color: #002040;
color: #80E000;
}
h1 {
color: #401480;
}
p.lorem-ipsum {
width: 350px;
font-size: 18px;
color: #001064
}
p.p-alpha {
font-size: 14px;
color: #FF20B0;
}
p.p-beta {
font-size: 14px;
color: #80E000;
}
</style>
</head>
<body>
<h1>Testing Sticky Divs</h1>
---
<br>
<div class="div-alpha">
DIV ALPHA
<p class="p-alpha">The other div covers me up, and I don't want to be covered up!</p>
</div>
<br>
<div class="div-beta">
DIV BETA
<p class="p-beta"> I don't want to cover the other div, but I do anyway :..(</p>
</div>
<!-- The Code Below is silly filler code that has been inserted so that the page will scroll up & down, which is required for observing the behavior of elements that have their "position" property set to "sticky" (i.e. "position: sticky;") -->
<br>
<br>
<br>
<br>
<h2>Lorem Ipsum Text</h2>
---
<p class="lorem-ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam. Purus non enim praesent elementum facilisis leo
vel fringilla est. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu consequat ac felis donec et odio pellentesque. In ante metus dictum at tempor commodo. Amet massa vitae tortor condimentum. Sapien eget mi proin sed libero enim sed faucibus
turpis. Tortor at risus viverra adipiscing at. Leo urna molestie at elementum eu facilisis sed. Pharetra diam sit amet nisl suscipit adipiscing. Cursus sit amet dictum sit amet justo donec. Euismod nisi porta lorem mollis. Massa ultricies mi quis
hendrerit. Lorem ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ornare arcu odio ut sem nulla pharetra. Faucibus et molestie
ac feugiat sed lectus. Commodo quis imperdiet massa tincidunt nunc. At augue eget arcu dictum varius duis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Convallis
posuere morbi leo urna molestie at. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tristique senectus et netus et malesuada fames ac. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ut aliquam purus sit amet luctus
venenatis lectus. Posuere urna nec tincidunt praesent. Aenean et tortor at risus viverra adipiscing at in. Justo eget magna fermentum iaculis eu. Placerat vestibulum lectus mauris ultrices eros in. Pharetra vel turpis nunc eget lorem dolor. Blandit
turpis cursus in hac habitasse platea dictumst quisque. Nisi porta lorem mollis aliquam ut porttitor leo. Lectus nulla at volutpat diam ut venenatis. Proin nibh nisl condimentum id venenatis. Arcu felis bibendum ut tristique et egestas quis ipsum.
Feugiat nibh sed pulvinar proin gravida. Odio facilisis mauris sit amet. Gravida in fermentum et sollicitudin ac. Magna etiam tempor orci eu lobortis elementum nibh. Donec ultrices tincidunt arcu non sodales. Consequat ac felis donec et odio. Amet
mattis vulputate enim nulla aliquet porttitor lacus luctus. Sagittis purus sit amet volutpat consequat mauris nunc. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Diam sit amet nisl suscipit. Viverra tellus in hac habitasse platea
dictumst vestibulum. Praesent tristique magna sit amet purus gravida.
</p>
</body>
</html>
So I figured it out:
Getting 2 Divs to Stick, w/o Covering One Another
There are two ways you can configure the Sticky <div> elements so that they don't cover each other when you scroll down the page.
#1
The first way is to set the property top of the lower div, to be the same combined height as the top div. The key word here is COMBINED which means: The padding and borders need to be added to the height to get an accurate value for top, otherwise the divs will still partially cover one another.
#2
The most simple, straight forward method, would be to create a parent div that is sticky, and then place the two original divs inside of it. Remove the position: sticky; property from the original two <div> elements, so that position sill be set to its default value. Its important that when doing this, you make sure that only the parent container has its position property set to sticky (i.e. position: sticky), or else you'll get undesired results. Below is the questions code rewritten using solution #2.
<!DOCTYPE html>
<html>
<head>
<style>
.div-alpha {
display: block;
text-align: center;
width: 200px;
height: 200px;
font-size: 30px;
text-decoration: underline;
border: 5px solid #08C8FF;
background-color: #900040;
color: #08C8FF;
}
.div-beta {
display: block;
text-align: center;
width: 200px;
height: 200px;
font-size: 30px;
text-decoration: underline;
border: 5px solid #EE1054;
background-color: #00307A;
color: #EE1054;
}
.div-gamma {
display: block;
text-align: center;
position: sticky;
top: 0;
}
p {
width: 350px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Testing Sticky Divs</h1>
---
<br>
<div class="div-gamma">
<div class="div-alpha">DIV ALPHA</div>
<div class="div-beta">DIV BETA</div>
</div>
<br>
<br>
<br>
<br>
<h3>Lorem Ipsum Text</h3>
---
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam. Purus non enim
praesent elementum facilisis leo vel fringilla est. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu
consequat ac felis donec et odio pellentesque. In ante metus dictum at tempor commodo. Amet massa vitae tortor
condimentum. Sapien eget mi proin sed libero enim sed faucibus turpis. Tortor at risus viverra adipiscing at.
Leo urna molestie at elementum eu facilisis sed. Pharetra diam sit amet nisl suscipit adipiscing. Cursus sit
amet dictum sit amet justo donec. Euismod nisi porta lorem mollis. Massa ultricies mi quis hendrerit. Lorem
ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui.
Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ornare arcu odio ut sem nulla pharetra. Faucibus et
molestie ac feugiat sed lectus. Commodo quis imperdiet massa tincidunt nunc. At augue eget arcu dictum varius
duis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Et molestie ac feugiat sed lectus
vestibulum mattis ullamcorper. Convallis posuere morbi leo urna molestie at. Enim sit amet venenatis urna cursus
eget nunc scelerisque viverra. Tristique senectus et netus et malesuada fames ac. Faucibus ornare suspendisse
sed nisi lacus sed viverra tellus. Ut aliquam purus sit amet luctus venenatis lectus. Posuere urna nec tincidunt
praesent. Aenean et tortor at risus viverra adipiscing at in. Justo eget magna fermentum iaculis eu. Placerat
vestibulum lectus mauris ultrices eros in.
Pharetra vel turpis nunc eget lorem dolor. Blandit turpis cursus in hac habitasse platea dictumst quisque. Nisi
porta lorem mollis aliquam ut porttitor leo. Lectus nulla at volutpat diam ut venenatis. Proin nibh nisl
condimentum id venenatis. Arcu felis bibendum ut tristique et egestas quis ipsum. Feugiat nibh sed pulvinar
proin gravida. Odio facilisis mauris sit amet. Gravida in fermentum et sollicitudin ac. Magna etiam tempor orci
eu lobortis elementum nibh. Donec ultrices tincidunt arcu non sodales. Consequat ac felis donec et odio. Amet
mattis vulputate enim nulla aliquet porttitor lacus luctus. Sagittis purus sit amet volutpat consequat mauris
nunc. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Diam sit amet nisl suscipit. Viverra
tellus in hac habitasse platea dictumst vestibulum. Praesent tristique magna sit amet purus gravida.
</p>
</body>
</html>
Here is an example
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
<div class="sticky">
<p> This is your sticky box </p>
</div>
<div>
<p>This is your other divs and properties </p>
</div>
This is what I do to make a navbar that has a functioning responsive mobile drop-down menu. Sounds like you already figured it out, but I thought id give ya some feedback. At the surface, the paradigm, is to put all objects that are supposed to stick in a single sticky container, however; implementing it is much harder than it sounds. Good Luck!
<!DOCTYPE HTML>
<html lang='us-en'>
<head>
<style type='text/css'>
.nav {
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
display: grid;
grid-template-columns: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.nav-bar {
background-color: #000;
display: block;
width: 100%;
}
.nav-bar a {
display: inline-block;
font-size: 26px);
text-decoration: none;
margin: 16px 4px 0 12px;
}
/*!!! ~~~ ICONS ~~~ */
#home {
display: block;
float: left;
padding: 12px;
font-size: 38px !important;
}
#bars {
display: none;
float: right;
padding: 4px;
font-size: 38px !important;
}
/*! ~~~ Drop & Drop-Items ~~~ */
.nav-drop {
background-color: #000;
display: none;
width: 100%;
}
.nav-drop button {
display: block;
width: 54%;
margin: 12px 23%;
border: 1px solid #0FF;
padding: 1px;
}
</style>
</head>
<!-- BODY'S MARKUP -->
<body>
<div class="nav">
<div class="nav-bar">
<i id="home" class="fa fa-home" aria-hidden="true" onclick="go2('home')"> </i>
HOME |
ABOUT |
CONTACT |
FORUM
<i id="bars" class="fa fa-bars" aria-hidden="true" onclick="dropMenu()"></i>
</div>
<div id="nav-drop" class="nav-drop">
<button onclick="go2('about')">ABOUT</button>
<button onclick="go2('contact')">CONTACT</button>
<button onclick="go2('forum')">FORUM</button>
</div>
</div>
</body>
</html>
Related
I have some HTML that looks like this: https://jsfiddle.net/9uwmxLa8/
I can't get the footer to stay at the bottom and not overlap the text on the page. The footer should stay at the bottom of the page if there isn't enough content to force the footer below the window height. I have the first part right--but can't get it to not overlap; I know it's because of position: absolute--but everything I search online tells me this is necessary.
I want it to function like this: https://codepen.io/cbracco/pen/zekgx
Any ideas how to fix this?
<div class="container">
<div>
<h1>This is some long test content.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget sapien risus. Cras eleifend, diam quis tempus mattis, nunc leo vulputate metus, et rhoncus elit libero ac nisl. In ligula lectus, ultricies in pretium eget, accumsan non turpis. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus molestie ultricies. Vivamus et libero et mauris rutrum hendrerit sed in leo. Fusce luctus lorem iaculis, mattis felis non, suscipit nisi. Integer tempus blandit est tempus ullamcorper.
Ut at risus eget arcu congue rhoncus sit amet pharetra turpis. Maecenas ultricies, ex eget egestas scelerisque, ante ipsum placerat mauris, vitae porta felis mauris dictum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Duis fringilla dolor a neque laoreet tristique. Donec non feugiat orci. Nulla nulla mauris, fermentum at arcu quis, venenatis consectetur odio. Vestibulum a risus non lorem ullamcorper sollicitudin. Praesent quis ante ipsum. Suspendisse odio ligula, tincidunt
vitae consectetur vel, posuere tincidunt odio. Donec at mollis neque. Sed ex felis, aliquam sed turpis eget, porta aliquet justo. Vivamus vestibulum libero id pulvinar egestas.
</p>
<p>
Quisque vestibulum urna eu blandit consectetur. Integer eget massa suscipit, scelerisque augue sed, mattis erat. Proin ut tincidunt nisi. Duis vestibulum congue accumsan. Vivamus a nisi tellus. Proin pretium neque eros, quis lacinia nisl pulvinar eget.
Quisque commodo urna eu nibh vulputate accumsan. Sed nec neque blandit, commodo metus sed, hendrerit orci. Nullam ullamcorper libero massa, vel pretium felis vulputate sed. Mauris in mauris pretium, accumsan erat quis, dapibus lacus.
</p>
<p>
Quisque arcu metus, ultricies sed urna a, gravida aliquam mauris. Nullam quis velit odio. Pellentesque dignissim odio tortor, at tempus nunc posuere et. In consequat eros a nunc varius, quis varius metus malesuada. Mauris viverra auctor elit quis hendrerit.
Donec risus ante, viverra et ante a, egestas faucibus purus. Integer semper id nulla eget vehicula. Aliquam a egestas leo. Suspendisse eu magna sit amet eros tempor ultrices. Quisque sed tempor purus, vitae egestas nunc. Cras congue nulla in sem
eleifend, sed pharetra ipsum volutpat. Etiam suscipit lacus ultricies dolor hendrerit fermentum. Pellentesque vestibulum in tellus ac blandit. In nec elit non eros tincidunt semper. Fusce sed leo eget ex laoreet fermentum sed vitae nibh. Aliquam
aliquam erat magna, sit amet gravida neque aliquam ac.
</p>
<p>
Phasellus vehicula, libero eget tempus tristique, lectus felis ornare erat, sit amet semper sapien sem ac nisl. Sed dignissim vulputate mauris, id imperdiet tellus tincidunt id. Proin eget risus a enim convallis pulvinar. In bibendum augue in tellus fermentum
sollicitudin. Proin finibus tellus lacinia hendrerit faucibus. Curabitur congue aliquam eros non condimentum. Nullam justo ex, pulvinar ac fringilla nec, ullamcorper in lorem ullamcorper in lorem ullamcorper in lorem. Quisque vestibulum urna eu
blandit consectetur.
</p>
</div>
<div class="footer">
<div>
This is a footer
</div>
</div>
</div>
SCSS:
p {
margin: 0 auto;
padding-top: 32px;
max-width: 75%;
font-size: 1.5em;
}
.container {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: cyan;
text-align: center;
}
position: absolute takes the element out if the normal layout. You then use left, right, and bottom to stick the footer to the bottom, essentially putting it over the bottom of the page.
By taking out those lines, my fiddle seems to above what you're wanting. If you want the footer to not have a margin, turn the margin to 0. Absolute positioning is not how that's done.
https://jsfiddle.net/kLqp3my7/
Make the body 100% of your page, with a min-height of 100% too.
The footer is then given negative margin-top:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
You can create a footer that will stick to the bottom of the page fairly easy using flexbox
set the .container to be a flex container with display: flex;, and stack the flex items in a column with flex-direction: column;
then set the main content to flex: 1 which is shorthand for
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
this will make it so that it will grow to fill the space, which will push the footer to the bottom of the page.
When the main content hits the footer, it will push the footer off the page since its in a flex container.
$(".add-section").on("click", function(){
$("main").append("<div class='section s3'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</div>");
});
* {
box-sizing: border-box;
}
html, body {
font-weight: 300;
font-size: 16px;
padding: 0;
margin: 0;
height: 100%;
}
.wrap {
display: flex;
min-height: 100%;
flex-direction: column;
}
header {
background: grey;
}
header .logo {
padding: 1.4rem;
font-size: 2rem;
}
main {
flex: 1;
}
.section {
font-size: 1.1rem;
padding: 1rem 2rem;
margin: 0;
background: #ccc;
}
footer {
background: grey;
padding: 1.2rem 1.4rem;
font-size: 1.2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div class='wrap'>
<header>
<div class='logo'>
Flexbox Footer
</div>
</header>
<main>
<div class='section s1'>
<button class='add-section'>Add Section</button>
</div>
<div class='section s2'>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
</main>
<footer>
Footer
</footer>
</div>
I am trying to move my footer to the bottom and in the cases if the content is not long enough, then push it to the bottom of the screen. I read that it can be achieved solely by using css, however I couldn't achieve it.
I tried creating columns,
<body>
<div id="wrapper">
<nav class="navbar navbar-default" role="navigation">
...
</nav>
<div id="content">
...
</div>
<div id="footer">
...
</div>
</div>
</body>
Then, in my css, I tried using:
#footer {
height: 30px;
width:100%;
background-color: #2D2D2D;
position: absolute;
left: 0;
bottom: 0;
}
#wrapper {
background-color: purple;
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
}
but no luck :/
Here I created it in bootply. Here, I added bunch of <br> tags to lengthen the content and added some text underneath. What I want is instead if content is short, stick the footer to the bottom of the page (not where content ends in the middle of the screen); and if content is long, where the content ends just below content.
What am I doing wrong/missing out?
Well, if you want it to always stay at the bottom, you can use this code. Remove the <p> tags and run again to test without text
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
position: relative;
padding-bottom: 5em;
box-sizing: border-box;
}
#content {
background: red;
}
footer {
height: 4em;
background: blue;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<body>
<div id="wrapper">
<div id="content">
<p> Lorem ipsum dolor sit amet, adipiscing odio, vitae nulla luctus consectetuer, cras odio turpis adipiscing lobortis, tempor luctus morbi. Sed vitae id in, vel tempor mattis rutrum, eu non mauris in erat lectus enim, eget morbi quo imperdiet, mi lorem aliquam sed accumsan orci. Rhoncus nonummy turpis ipsum tempus tempor elementum, vestibulum sint tempor, accumsan mauris scelerisque rutrum. Eget rhoncus hendrerit, ipsum ipsum nunc sit ut arcu aenean, urna in justo reprehenderit mollis, suscipit erat, consequat suspendisse turpis duis nec pellentesque tristique. Lectus velit, vestibulum lorem enim turpis a eu mauris, mauris bibendum sociis lobortis sodales sed, eget rhoncus quisque consequat curabitur sit. Sodales velit et convallis interdum quis rutrum, dolor lobortis neque mi eget lorem, sed tincidunt dis convallis. Feugiat in conubia nec ipsum, nec rutrum nisl, vitae id vestibulum sollicitudin fringilla ac ligula, eget rutrum in. Tortor mollis amet, nulla pharetra nec in, vel vulputate nec eu diam, cras massa adipiscing pulvinar, id pulvinar massa dignissim. Quisque lorem enim vel orci vestibulum, consectetuer tincidunt et egestas.</p>
<p>
Donec nunc nec in, ut non lorem eget tortor facilisi sed, eget tempor a duis urna, pellentesque proin blandit et, mollis dictum dictum. Aliquet massa praesent vitae lorem at posuere, id lobortis nec id dignissim lorem nisi, at amet occaecati, duis enim quisque quam est, ultrices nunc semper vivamus praesent aenean nam. Natoque neque adipiscing, ipsum magna libero. Pellentesque mattis, fusce maecenas sit vel, accumsan eleifend et justo cras dui, wisi quisque interdum amet arcu bibendum, ante eget non mattis non. Iaculis congue cras feugiat. Platea aliquet suspendisse, orci nulla aliquam adipiscing in. Nullam libero velit in pellentesque diam est, urna phasellus, pellentesque porta eu. Ante lacus duis amet libero odio, accumsan neque tincidunt imperdiet, wisi praesent diam arcu et, erat aliquam feugiat ultricies tortor ullamcorper. Vestibulum sapien velit, ante fusce cursus volutpat tellus, eros officiis, ridiculus cum eu suscipit, felis dui sed nulla hac neque fermentum. Vivamus sagittis, malesuada nullam, dolor sit sed sollicitudin et maecenas fermentum, non nunc dapibus purus. Aliquam rhoncus aliquam sit fermentum, curabitur nulla accumsan.</p>
<p>
Nec consequat. Purus neque inceptos suscipit dictum, dolor massa ut egestas proin sed ultrices, eleifend at sed sit mi adipiscing sociis. Nostra laoreet metus nulla in. Urna eget, accumsan id mattis morbi, etiam a consequat curabitur, in felis vel. Aliquam feugiat sed, sit ligula sit praesent lobortis orci metus, nulla cursus mi velit vitae, a erat elit, velit ultrices consectetur libero perferendis libero. Risus sed, suspendisse urna in eget voluptas tristique, aliquam justo lectus, rutrum scelerisque, sem nibh qui dictum aliquet lacinia ut. Urna sagittis ac tristique gravida risus aliquam, dictum ipsum ac sodales, felis mauris repellendus porttitor aenean, orci vel feugiat nunc hendrerit. Porta eu, etiam pellentesque mauris et aliquam consectetuer donec, molestie dui magna enim, ac eu erat ut, lectus ligula feugiat urna per. Ornare aliquet ligula, ultricies sint arcu ipsum nulla. Vel ut vitae dui adipiscing.</p>
</div>
<footer>This is a footer</footer>
</div>
</body>
The trick is to use position: relative on the footer's container element and position: absolute on the footer to actually push it to the end of the container. Position: fixed isn't necessary.
https://codepen.io/cbracco/pen/zekgx
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
This example does the same thing with a container element over the entire page, instead of operating on the html and body tags.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
This sends the footer to bottom of the bage no matter how much text you have:
.footer { background-color: #2D2D2D;
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 30px;/* or however high you would like */ }
html, body {
height: 100%; }
.wrapper { background-color: purple;
position: absolute;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
.footer, .push {
30px; }
.navbar {
background-color: red }
Ok, sorry for the misunderstanding, now it's fixed: http://www.bootply.com/N3XiwwGr9q#
I hava a simple question about css.
In my project i have a long width table. Like this:
Like you see the bottom scroll is nesesery.
The forecast is the header for this month under him.
On second screen you see the situation when i scroll to the end.
Right now the forecast text is in the center of cell.
So when this cell will be much longer the forecast text will be visible only when i scrool to center. My question is: Is it possible to make this text visible always when i scroolin on the forecast section and its float with the scrool ?
As a solution you can create an absolute positioned layer with transparent background.
Look a snippet as an example:
.div1 {
width: 400px;
height: 200px;
overflow-x: scroll;
overflow-y: hidden;
background-color: green;
color: yellow;
}
.div2 {
position: relative;
width: 1000px;
height: 170px;
background-color: yellow;
color: green;
top: 30px;
}
.hdr {
position: absolute;
left: 8px;
top: 8px;
text-align: center;
width: 400px;
height: 30px;
background: transparent;
color: white;
}
<div class="div1">
<div class="hdr">HEADER</div>
<div class="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis fringilla tellus. Pellentesque porttitor elit sit amet arcu efficitur, vel ultricies lacus posuere. Etiam sed quam quis
tellus accumsan vehicula quis a enim.
Donec volutpat, justo ut tempor facilisis, dui erat semper leo, vel facilisis libero arcu quis est. Mauris dapibus hendrerit porta. Sed non nisi libero. In hac habitasse platea dictumst. Aliquam erat volutpat. Etiam rhoncus, metus vel
ultrices scelerisque, magna felis dignissim tellus, in suscipit neque diam eu libero. Fusce accumsan fringilla libero, ut auctor odio maximus vel.
Aenean a venenatis leo, elementum varius enim. Donec vitae turpis sit amet magna aliquet pulvinar nec eget odio. Ut vitae ornare augue.
Sed iaculis enim at scelerisque suscipit. Cras at tortor congue, vestibulum ipsum a, viverra lectus. Cras massa neque, commodo sed lacus id, convallis sodales urna</div>
</div>
I used this code to print a table using JSTL. The table was in the contentFrame div. However, the footer which was initially at the bottom started to float and overlap with the contentFrame. I don't want to keep the footer in a fixed position though. Is there a way to keep it at the bottom of the page such that when new content is added it is "pushed" down?
body {
background-color: blue;
}
#contentFrame {} #date {
float: left;
}
#logOutFrame,
#contentFrame,
#headerFrame,
#menuFrame {
background-color: red;
}
#headerFrame {
margin-top: 30px;
}
#logOutFrame {
left: 0px;
position: absolute;
text-align: right;
top: 0px;
width: 100%;
}
#footerFrame {
background-color: orange;
bottom: 0px;
left: 0px;
position: absolute;
text-align: center;
width: 100%;
}
<div id="logoutFrame">
<span id="date"> Date </span>
<span id="userEmail"> blah#email.com </span>
<a id="signOutLink" href="#"> Sign Out </a>
</div>
<div id="headerFrame">
<h1>Pointwest Logo</h1>
</div>
<div id="menuFrame">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div id="contentFrame">
// content
</div>
<div id="footerFrame">
<p>footer</p>
</div>
EDIT: used the sticky footer from bootstrap and it worked
One way to solve this is:
Give the #footerFrame a default position: absolute
Use .js to monitor the height of the browser viewport and the height of the #contentframe
If #contentframe height exceeds the remaining viewport height, change #footerFrame to position: relative
function positionFooter() {
var contentFrame = document.getElementById('contentFrame');
var footerFrame = document.getElementById('footerFrame');
var contentY = contentFrame.offsetTop;
var contentHeight = contentFrame.clientHeight;
var viewportHeight = window.innerHeight;
var footerHeight = footerFrame.clientHeight;
if ((contentY + contentHeight) > (viewportHeight - footerHeight)) {
footerFrame.style.position = 'relative';
}
else {
footerFrame.style.position = 'absolute';
}
}
window.addEventListener('load',positionFooter,false);
window.addEventListener('resize',positionFooter,false);
body {
background-color: blue;
}
#contentFrame {
height: 300px;
}
#date {
float: left;
}
#logOutFrame,
#contentFrame,
#headerFrame,
#menuFrame {
background-color: red;
}
#headerFrame {
margin-top: 30px;
}
#logOutFrame {
left: 0px;
position: absolute;
text-align: right;
top: 0px;
width: 100%;
}
#footerFrame {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: orange;
text-align: center;
}
body, #contentFrame, #footerFrame, #footerFrame p {
margin: 0;
padding: 0;
}
<div id="logoutFrame">
<span id="date"> Date </span>
<span id="userEmail"> blah#pointwestcom.ph </span>
<a id="signOutLink" href="#"> Sign Out </a>
</div>
<div id="headerFrame">
<h1>Pointwest Logo</h1>
</div>
<div id="menuFrame">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div id="contentFrame">
// content
</div>
<div id="footerFrame">
<p>footer</p>
</div>
You should use <div style="clear:both;"></div> to clear float before footer this way:
<div style="clear:both;"></div>
<div id="footerFrame">
<p>footer</p>
</div>
but no need to make position of footerFrame absolute:
#footerFrame {
background-color: orange;
text-align: center;
width: 100%;
}
and TO LEARN MORE ABOUT FLOATS check this out:
https://css-tricks.com/all-about-floats/
How big is your content?
If you remove the 'position: absolute;' or 'bottom: 0px;' from the #footerFrame css, the footer will move up to position itself under the page content.
If your content isn't big enough to fill the window, this may not be desired.
There is a number of footer solutions already on SO if you search for them that will show you the many ways you can achieve a footer solution that will work for you.
EDIT NOTE: this answers a different question, as I thought the header/footer needed to be in a fixed position. Left here for usefulness based on question title, but otherwise incorrect.
If you're able to accurately declare the height of your header and footer, this is exactly what position:fixed was made for.
NOTE: I only used [attribute] selectors for speed of creating the demo! Use classes instead in your actual production code- it's what classes are for, and doesn't run the risk of getting blasted by some shiny new feature at some point in the future!
http://dabblet.com/gist/a633128f55dbcc160ecc
[head]{
position:fixed;
width:100%;
top:0px;
height:20px;
background-color:#ccc;
}
[foot]{
width:100%;
position:fixed;
bottom:0px;
height:20px;
background-color:#ccc;
}
[cont]{
/*set the top margin to the height of the header, plus a bit of buffer*/
/*set the bottom margin to the height of the header, plus a bit of buffer*/
margin:25px 0 25px;
}
<div head>
This is a header
</div>
<div foot>
This is a footer
</div>
<div cont>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis dui eget ex ullamcorper, id hendrerit lectus semper. Etiam aliquam lacus posuere, tempus quam et, tempus sapien. Sed vitae lobortis urna. Nulla at augue libero. Morbi cursus quam non velit commodo tincidunt. Nulla facilisi. Quisque vitae ante a massa scelerisque accumsan vitae in nibh. Mauris quam augue, gravida et rutrum sit amet, sodales et neque. Proin ullamcorper vulputate mi, ut suscipit nisi pharetra at. Aenean nibh orci, auctor id ex eu, molestie tincidunt velit. Praesent pretium ipsum finibus tortor pretium mollis. In et quam sodales, fermentum metus eget, volutpat lectus. Cras suscipit ipsum ut lectus placerat, vitae eleifend turpis varius. In consectetur nisl semper, maximus urna at, laoreet diam. Sed efficitur eleifend lectus, venenatis sollicitudin eros auctor nec.</p>
<p>Nunc egestas non diam id lobortis. Phasellus rhoncus, turpis interdum fermentum aliquet, risus enim commodo turpis, ac vestibulum massa neque vitae leo. Praesent non consequat leo, nec dignissim eros. Nullam convallis posuere ligula, eu tincidunt eros posuere vitae. Suspendisse vel fringilla metus, sit amet pellentesque justo. Donec feugiat elit in laoreet sagittis. Duis eget metus tellus. Suspendisse sollicitudin commodo dolor consequat efficitur. Nulla molestie leo at velit sagittis, vitae dictum eros gravida. Sed fringilla egestas ipsum, nec vulputate metus ornare in. Aenean et magna quis ante sodales posuere a pharetra purus. Sed malesuada nulla vitae eros lobortis, quis molestie lacus aliquam. Suspendisse eget arcu eu ex sollicitudin tempor ut eu ante. Aliquam mollis velit non elementum malesuada. Curabitur vehicula eu tellus sed tincidunt. Donec consequat neque id sapien venenatis, eget accumsan enim lacinia.</p>
<p>Nunc pellentesque nibh vitae quam aliquam pulvinar. Curabitur viverra odio quis purus commodo, in consequat nisi interdum. Morbi bibendum metus a mauris mattis, et laoreet erat eleifend. Morbi venenatis dapibus lorem, vitae egestas odio varius ac. Praesent id scelerisque ligula. Nullam dictum, metus sed fringilla sagittis, lacus magna bibendum metus, eget maximus ligula purus ac lectus. Vestibulum auctor sodales odio, ac gravida mauris pharetra quis. Etiam tincidunt pharetra lectus, ornare tempor augue ultricies in. Nulla tincidunt tempor eros. Aliquam ornare lorem dui, non pharetra orci elementum vitae. Nunc viverra consectetur orci, id dictum quam sodales a. Nullam vulputate orci nec luctus scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In at facilisis augue. Aenean ullamcorper ex a enim lacinia suscipit.</p>
<p>Phasellus condimentum risus ut rutrum dapibus. Phasellus nec porta orci. Pellentesque laoreet odio at elementum tincidunt. Sed venenatis dui libero, quis fermentum nibh euismod quis. Proin sit amet tellus lorem. Ut egestas enim nec est sollicitudin pellentesque. Donec consequat luctus mi at mattis. Praesent pharetra mattis dolor non aliquam.</p>
<p>Phasellus libero eros, venenatis quis rutrum posuere, feugiat ac tellus. Phasellus et dolor nibh. Proin in erat mauris. Sed dictum mi sit amet tellus iaculis vulputate ut quis ex. Integer facilisis sed ante a euismod. Pellentesque sem felis, venenatis sit amet est id, cursus facilisis felis. Morbi commodo risus lectus, ac scelerisque velit iaculis ac. Nunc dignissim est nec lorem maximus, sit amet consectetur leo efficitur. Morbi sit amet diam augue. Ut nec magna a sapien dictum dapibus. </p>
</div>
If you're unable to declare the heights, well... you can fake it by including an exact copy of your header and footer without the position:fixed; but with visibility:none; above and below your content (respectively). Note that depending on how you do this, why the size is non-declarable, and what your header/footer contains, this may or may not be viable.
A less hacky way would be to add the margins with js based on the display size of your header/footer. I would actually suggest doing this instead, so long as the target browsers can support it.
If you want the footer to only marry the bottom if the content goes past it, you'll have to use js to detect the window size and default the footer/header to relative. If the window overflows, switch to fixed.
I have the following code. Jfiddle is here. As seen, the bottom borders, what resemble <HR> tags extend the entire length of the page.
I would like to limit the borders of <h1> and <h2> tags to be only 30% of the page. While <h3> tags remain extending across the entire page. Is this possible with css?
EDIT: with a follow up question, how would I change the css on the <h3> tag so that under the border is roughly one line of white space the same size of the font as <h3>?
HTML
<HTML>
<HEAD>
<TITLE>Sample Wiki Page</TITLE>
<link rel='stylesheet' type = 'text/css' href = 'default.css' />
</HEAD>
<BODY>
<DIV id='content'>
<h3>Main Title</h3>
<h2>Sub Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros odio, venenatis ut suscipit eget, vestibulum id est. Vivamus aliquet lacus sit amet enim tempus in fermentum ipsum ornare. Pellentesque tincidunt orci sed sem luctus tristique. Ut a turpis ac nisi semper luctus. Nulla mattis ornare augue, vel lacinia purus porta eu. Vestibulum pulvinar justo dolor, in ultricies tellus. Nullam semper, ante at feugiat commodo, neque eros pulvinar ante, et porttitor velit orci eu magna. Duis mattis libero vitae magna lacinia tincidunt. Vivamus placerat elit a nisi ultrices elementum. Vestibulum condimentum posuere nulla, id ornare urna mattis id. Quisque ornare risus diam. Nunc malesuada leo sit amet mauris bibendum pharetra. Integer convallis orci id lorem volutpat suscipit.
Vestibulum ac magna libero, non condimentum neque. Integer vestibulum, quam at tempus fermentum, mi odio dictum nibh, quis venenatis velit ligula laoreet massa. Fusce lobortis augue eu ante bibendum consequat eget posuere neque. Mauris dui lorem, fringilla et auctor a, eleifend id nisi. Sed nunc tortor, blandit et malesuada quis, posuere pellentesque lorem. Nunc vehicula lectus eget tortor tempus sed pharetra diam luctus. Aenean odio leo, accumsan a vestibulum ut, tincidunt in mi. Curabitur commodo venenatis dolor, ultrices placerat nibh tempor nec. Duis eget odio mi, id imperdiet lectus. Aenean luctus bibendum arcu non egestas.
</p>
<h2>Code Section</h2>
<pre>
<xmp>
<HTML>
<HEAD>
<TITLE>Sample Wiki Page</TITLE>
<link rel='stylesheet' type = 'text/css' href = 'default.css' />
</HEAD>
<BODY>
<h3>Main Title</h3>
<h2>Sub Title</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros odio, venenatis ut
suscipit eget, vestibulum id est. Vivamus aliquet lacus sit amet enim tempus in fermentum
ipsum ornare. Pellentesque tincidunt orci sed sem luctus tristique. Ut a turpis ac nisi
semper luctus. Nulla mattis ornare augue, vel lacinia purus porta eu. Vestibulum pulvinar
justo dolor, in ultricies tellus. Nullam semper, ante at feugiat commodo, neque eros
pulvinar ante, et porttitor velit orci eu magna. Duis mattis libero vitae magna lacinia
tincidunt. Vivamus placerat elit a nisi ultrices elementum. Vestibulum condimentum posuere
nulla, id ornare urna mattis id. Quisque ornare risus diam. Nunc malesuada leo sit amet
mauris bibendum pharetra. Integer convallis orci id lorem volutpat suscipit.
Vestibulum ac magna libero, non condimentum neque. Integer vestibulum, quam at tempus
fermentum, mi odio dictum nibh, quis venenatis velit ligula laoreet massa. Fusce lobortis
augue eu ante bibendum consequat eget posuere neque. Mauris dui lorem, fringilla et auctor
a, eleifend id nisi. Sed nunc tortor, blandit et malesuada quis, posuere pellentesque lorem
. Nunc vehicula lectus eget tortor tempus sed pharetra diam luctus. Aenean odio leo,
accumsan a vestibulum ut, tincidunt in mi. Curabitur commodo venenatis dolor, ultrices
placerat nibh tempor nec. Duis eget odio mi, id imperdiet lectus. Aenean luctus bibendum
arcu non egestas.
<h2>Code Section</h2>
<pre>
</pre>
</BODY>
</HTML>
</xmp>
</pre>
</DIV>
</BODY>
</HTML>
CSS
#content pre {
padding: 1em;
border: 1px dashed #2f6fab;
color: black;
background-color: #f9f9f9;
white-space: pre;
margin: 1em 0px;
display: block;
font-family: monospace,Courier;
line-height: 1.1em;
width:70%;
}
#content h3{
font-size: 188%;
line-height: 1.2em;
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
}
#content h1, h2 {
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
}
You can use width: 30% for your first question, and margin-bottom: 1.2em for your second.
Here is your fiddle.
You can do something like this. http://jsfiddle.net/n5qRS/1/
<h1><span>Hello World</span></h1>
css
h1 span {
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
display: block;
width: 30%;
}
as for the second question, add a margin bottom to the h3 the same as the line height of the h3.
It is very odd that you are having your h3 as a the Main Title and h2 as the subtitle (that is reversed of how it "should" be). This fiddle uses pseudo-elements to get the border.
#content h1:after, h2:after {
content: '';
display: block;
width: 30%;
height: 0;
margin: 0 auto;
border-bottom: 1px solid #aaa;
}
The margin-bottom is added in that fiddle to the h3 for your follow-up.