I have a very simple problem: I want to have multiple <section>s inside a <main> tag. Each of the sections should contain a child <div> that is sticky so it is bound by the height of the section.
Now I have the problem that the <main> needs overflow-x: hidden to remove unwanted horizontal scrollbars (especially on Safari) but at the same time this line seems to disable the sticky elements. Any ideas how to solve this without JS?
This demo shows the problem. Uncomment the overflow to see the difference.
<!DOCTYPE html>
<html>
<head>
<style>
main {
width: 100%;
height: auto;
min-height: 100vh;
/*overflow-x: hidden;*/
position: relative;
display: block;
}
section {
width: 100%;
min-height: 100vh;
background: green;
}
div {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<main>
<section>
<div>
<p>Content goes here</p>
</div>
</section>
<section>
<div>
<p>Second content goes here</p>
</div>
</section>
</main>
</body>
</html>
Position sticky normally doesn't work if parent element have overflow hidden property.
Instead of main try to give "overflow-x: hidden" to the body
body
{
overflow-x: hidden;
}
You may try below code,
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
main {
width: 100%;
height: auto;
min-height: 100vh;
/*overflow-x: hidden;*/
position: relative;
display: block;
}
section {
width: 100%;
min-height: 100vh;
background: green;
}
div {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<main>
<section>
<div>
<p>Content goes here</p>
</div>
</section>
<section>
<div>
<p>Second content goes here</p>
</div>
</section>
</main>
</body>
</html>
Note: Also you may use overflow: auto; instead of overflow-x: hidden; for this particular task only.
For your reference please visit below link: https://www.w3schools.com/css/css_overflow.asp
Related
I have a site with two footers. One is very well behaved as a 'fixed' footer that is always visible at the bottom of the page. The other footer is larger and should be below all content, only appearing when all content is scrolled through (if the content is bigger than the page, it shouldn't be visible until you scroll to the bottom). However, it does need to be sticky so that if there's very little content it doesn't ride up and leave an awkward white gap.
Right now it's displaying in the middle of the page. :( Help?
html, body {
height: 100%;
width: 100%;
}
#PageContainer {
width: 100%;
height: 100%;
}
header {
width: 100%;
}
#Content {
position: relative;
background-image:url(Images/Golf%20Ball%20Texture.jpg);
background-repeat:repeat;
background-size: 150px auto;
width: 100%;
padding-left: 20px;
margin-left: -20px;
padding-right: 20px;
margin-right: -20px;
min-height: 90%;
}
footer {
width: 100%;
}
#MovingFooter {
clear: both;
position: absolute;
width: 100%;
background-color: #FFD600;
right: 0;
bottom: 0;
font-size: .9em;
}
#StickyFooter {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #787878;
padding-left: 20px;
margin-left: -20px;
padding-right: 20px;
margin-right: -20px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="Stylesheet" href="../style.css" type="text/css" />
<link rel="shortcut icon" href="Images/Logo%20Favicon.ico">
<title>Your Personality</title>
</head>
<div id="PageContainer">
<header>
</header>
<body>
<div id="Content">
</div> <!--id="Content"-->
<div id="MovingFooter">
<h2>Company Philosophy</h2>
<p>Footer content</p>
</div> <!--class="FooterThirds" -->
</div> <!-- class="ThirdsContainer" -->
</div> <!-- id="MovingFooter" -->
<div id="StickyFooter">
<p class="FancyFinePrint">© Copyright 2014 by Company Name. All Rights Reserved.</p>
<div id="FooterPartners">
<p class="FooterPartnerText">Proud Partners With:</p>
</div> <!-- id="FooterPartners" -->
</div> <!-- id="StickyFooter" -->
</div> <!-- id="PageContainer" -->
</body>
You're looking for a technique like FooterStickAlt, which keeps the footer below the content, but also keeps the footer at the bottom of the viewport if the content isn't as tall enough to push it down that far.
Put simply, everything except the footer gets wrapped in a containing element which has min-height: 100%, and then the footer is pulled up with a negative top margin. This particular technique necessitates knowing the height of your sticky footer.
https://css-tricks.com/snippets/css/sticky-footer/ and http://cssstickyfooter.com are the same idea.
I've got a question regarding positioning of two objects: image and div. I want bg2.png image to stay under div. I keep encountering problem with image pushing div down by img's height. How do I avoid that?
I tried pushing down image with "top:" value but of course it leaves me with empty area above div. Also I tried adding negative "top:" value and relative position to "maincontent" div but again it left me with empty area, only difference was that this time it was under the div.
HTML:
<body>
<img src="./images/bg2.png" class="bgimg" />
<div id="maincontent">
</div>
</body>
CSS:
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
Thanks in advance.
edit - what I'm trying to achieve:
Click me!
2 solutions:
Change your HTML structure:
<body>
<div id="maincontent">
</div>
<img src="./images/bg2.png" class="bgimg" alt="some">
</body>
or make it as the background-image:
<body>
<div id="maincontent">
</div>
</body>
#maincontent {
background: url(./images/bg2.png) no-repeat 0 100%;
padding-bottom: height_of_image_in_px;
}
<style>
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
</style>
<body>
<div id="maincontent">
<img src="./images/bg2.png" class="bgimg" alt="some info about image here">
</div>
</body>
if you want that image inside the div use this code. or if you want make that image background of that div use css background property
I'm using the sticky footer from here: http://ryanfait.com/sticky-footer/
The CSS looks like this:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
And the HTML like this:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
If I add another div within the wrapper is it possible to somehow set its height to fill the wrapper? Thanks!
Just add height: 100%; to the div you want to add to your wrapper
This should be a pretty trivial issue, but it's causing me a bit of a headache.
I have an html layout, summarized with the relevant code below. Basically I have the <section> and <aside> acting as the main content, and the right handed content. I am trying to make sure they will always behave in this manner, regardless of any kind of funky boundaries caused by borders, margins, padding, etc. The solution seemed to be simply setting them to have absolute and relative positioning.
This did achieve my desired result, but I am having trouble with the underlying content. The <article> does not stretch to the right height. Since the height is not always determinable at code-time, giving it a set height is not an option. My intended goal is that the underlying <article> background will stretch to accommodate no matter how high either of the <section> or <aside> panes become. Any ideas?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
.container { margin: 0px auto; width: 960px; position: relative }
article {
overflow: hidden;
background-color: Black;
height: auto;
}
section {
width: 675px;
position: relative;
left: 0px;
overflow: hidden;
margin: 10px;
height: 300px;
background-color: Aqua;
}
aside {
width: 260px;
position: absolute;
right: 0px;
top: 0px;
overflow: hidden;
margin: 10px;
height: 500px;
background-color: Fuchsia;
}
</style>
</head>
<body>
<div class="container">
<article>
<section>
</section>
<aside>
</aside>
</article>
</div>
</body>
</html>
As requested, here is the code with faux columns:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Faux column example</title>
<meta charset="UTF-8" />
<style type="text/css">
html, body {
height: 100%;
}
.container {
margin-bottom: 2em;
}
article {
background: #000 url(http://imaginekitty.com/cssExamples/oog.gif) repeat-y;
border: solid 10px #000;
display: block;
margin: 0 auto;
min-height: 100%;
width: 945px;
overflow: hidden;
}
section {
display: block;
float: left;
overflow: hidden;
width: 668px;
}
aside {
float: left;
margin-left: 20px;
overflow: hidden;
width: 255px;
}
</style>
</head>
<body>
<div class="container">
<p>There is no use of absolute or relative positioning here.</p>
<article>
<section>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</section>
<aside><p>asdf</p>
</aside>
</article>
</div>
<div class="container">
<article>
<section>
<p>asdf</p>
</section>
<aside><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</aside>
</article>
</div>
</body>
</html>
The reason I mentioned that absolute positioning is, in my opinion, inappropriate in this situation is that it removes elements from the normal document flow which will most likely cause issues with other elements on the page. At best, it's just unnecessary. At worst, you'll pull your hair out trying to figure out problems. :)
A good article on the subject: http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/
Im having some problems getting the Sticky Footer to work on my site. If the content is smaller than the window the footer should stay at the bottom of the window and the dead space should be filled up with a div. I think the CSS Sticky Footer does this, but I cant get the "push div" to work push the content all the way down. As you can see my code isn't just body-wrapper-footer.
<body>
<div id="banner-bg">
<div id="wrapper">
<div id="header-bg">
<!-- header stuff -->
</div> <!-- end header-bg -->
<div id="content-bg">
<div id="content">
<!-- content stuff -->
</div> <!-- end content -->
</div> <!-- end content-bg -->
</div> <!-- end wrapper -->
</div> <!-- end banner-bg -->
</body>
body {
color: #00FFFF;
background-image: url("Images/img.gif");
font-size: 1em;
font-weight: normal;
font-family: verdana;
text-align: center;
padding: 0;
margin: 0;
}
#banner-bg {
width: 100%;
height: 9em;
background-image: url("Images/img2.gif"); background-repeat: repeat-x;
position: absolute; top: 0;
}
#wrapper {
width: 84em;
margin-left: auto;
margin-right: auto;
}
#header-bg {
height: 16em;
background-image: url("Images/header/header-bg.png");
}
#content-bg {
background-image: url("Images/img3.png"); background-repeat: repeat-y;
}
#content {
margin-right: 2em;
margin-left: 2em;
}
Im confused about where the CSS Sticky Footer-code should go in my case.
Edit, heres what I got and what I want to do:
alt text http://bayimg.com/image/gacniaacf.jpg
Your HTML is a tad strange. For example, why does banner-bg wrap around everything?
That said, in order to use Sticky Footer technique you need to wrap everything but the footer into a single DIV. So your <body> tag would only contain two top DIVs - wrapper and footer. All the stuff you currently have would go inside that wrapper DIV.
Note that Sticky Footer may not work for you if background images you're using include transparent areas as it relies on wrapper background being covered by the header.
Update: Ok, here's the version that works. "Sticky Footer" style sheet is taken from cssstickyfooter.com and should work in all modern browsers. I've streamlined your HTML a bit (there's no need for separate background layers based on your picture) but you can modify it as you like so long as you keep the basic structure in place. Also, since I don't have your images I've added solid background colors for illustration purposes, you'll need to remove them.
<html>
<head>
<style>
* {margin: 0; padding: 0}
html, body, #wrap {height: 100%}
body > #wrap {height: auto; min-height: 100%}
#main {padding-bottom: 100px} /* must be same height as the footer */
#footer {position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
}
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */
/* Do not touch styles above - see http://www.cssstickyfooter.com */
body {
background-image: url("Images/img.gif");
background: #99CCFF;
color: #FFF;
font-size: 13px;
font-weight: normal;
font-family: verdana;
text-align: center;
overflow: auto;
}
div#banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 9em;
background: url("Images/img2.gif") repeat-x;
background: #000;
}
div#wrap {
background: #666;
width: 84em;
margin-left: auto;
margin-right: auto;
}
div#header {
height: 16em;
padding-top: 9em; /* banner height */
background: url("Images/header/header-bg.png");
background: #333;
}
div#footer {
background: #000;
width: 84em;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="banner">Banner</div>
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">Header</div>
<div id="content">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content
</div> <!-- end content -->
</div> <!-- end main -->
</div>
<div id="footer">
Footer
</div>
</body>
</html>
Instead of modifying your existing styles (or using CSS Sticky Footer), its a lot easier for me to just redo it. So here goes:
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
}
#container {
height: 100%;
margin: 0 0 -200px 0;
position: relative;
}
#footer {
position: relative;
height: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Oh Beautiful Header</div>
<div id="content">Lots of Content</div>
</div>
<div id="footer">Stay Put Little Footer</div>
</body>
Basically the negative margin should match the height of the footer, height 100% needs to be applied to html/body, and the position relative should be declared.
Also in reference to the xHTML, notice how the "footer" div is not INSIDE the "container" div, but rather, outside of it (so that there are 2 separate container-like divs, container and the footer).
If your still having trouble, the main problems with your markup IS:
100% height needs to be declared for html and body tag.
negative margin is missing on the container div which is the #banner-bg
if footer is 100px tall, #banner-bg should have margin-bottom: -100px
position needs to be relative on both #banner-bg and the #footer
html { height: 100%;}
body {
color: #00FFFF;
background-image: url("Images/img.gif");
font-size: 1em;
font-weight: normal;
font-family: verdana;
text-align: center;
padding: 0;
margin: 0;
height: 100%;
}
#banner-bg {
width: 100%;
height: 100%;
background-image: url("Images/img2.gif"); background-repeat: repeat-x;
position: relative;
margin: 0 0 -200px 0;
}
#wrapper {
width: 84em;
margin-left: auto;
margin-right: auto;
}
#header-bg {
height: 16em;
background-image: url("Images/header/header-bg.png");
}
#content-bg {
background-image: url("Images/img3.png"); background-repeat: repeat-y;
}
#content {
margin-right: 2em;
margin-left: 2em;
}
#footer {
position: relative;
height: 200px;
}
and the rest:
<body>
<div id="banner-bg">
<div id="wrapper">
<div id="header-bg">
<!-- header stuff -->
</div> <!-- end header-bg -->
<div id="content-bg">
<div id="content">
<!-- content stuff -->
</div> <!-- end content -->
</div> <!-- end content-bg -->
</div> <!-- end wrapper -->
</div> <!-- end banner-bg -->
<div id="footer">
Footer Content
</div>
</body>
</html>
I'm not sure what Sticky Footer meant to do when the content is actually longer than your page height...
If it should be floating over the text while you are scrolling then I would use Javascript to calculate the bottom coordinates and place the footer on a new layer in the fixed position. This could be made quite cross-browser friendly as well...
It's great to be able to implement the sticky footer using CSS and HTML alone, but I'm not a big fan of adjusting my markup / document structure for something cosmetic.
I much prefer a JavaScript approach, no graceful degradation. If no JS, no sticky footer. I typically use jQuery to implement:
jQuery
$(window).resize(function() {
if ($('body').height() < $(window).height()) {
$('#footer').addClass('fixed');
}
else {
$('#footer').removeClass('fixed');
}
}).resize();
CSS
#footer.fixed { position: fixed; bottom: 0; width: 100%; }
here you can find some code as follows
Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
In CSS:
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.
In HTML Body:
Your website content here.
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2013</p>
</div>