I am trying to get my footer correct but am having issues. I was able to keep the footer down at the bottom of the page but then soon realized that when the window is made small, it ends up covering content. I can fix this by taking away position:absolute BUT the footer no longer stays at the bottom of the page if I do this.
I've tried a lot of different things to get this to work, but this is what I am currently looking at, I am hoping someone could lend some advice here..
CSS code:
html, body {
margin: 0;
padding: 0;
height:100%;
}
#wrapper {
width:900px;
background-color:#FAFAFA;
min-height:100%;
margin:0 auto -45px;
height: auto !important;
height:100%;
}
#content{
margin-top:40px;
float: left;
padding-left:100px;
padding-bottom:30px;
overflow:auto;
}
#footer{
height:30px;
bottom:0;
background:#D2CFCF;
width:900px;
clear:both;
position:absolute;
}
I recently tried margin-top:-30px in the footer, and position:relative. With the code above, the footer is nice and seated on the bottom but covers content when the window is made small. What can I do?
The HTML is basically as follows
<body>
<div id="wrapper">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
Use a position: fixed; rule on the footer and a bottom margin on the <body> tag.
http://jsfiddle.net/JGUYh/
BODY {
margin: 0 0 60px 0; /* keep regular content clear of the footer */
}
#footer {
position: fixed;
width: 100%;
height: 50px;
bottom: 0px;
background: #ccc;
overflow: hidden;
}
Note that depending on the window size the footer will cover the content sometimes. But scrolling will reveal any hidden content.
Related
I am using the jQuery library Nanoscroller to get the content div to scroll if it has a lot of content in there, and it does this fine. However, the problem I have is that the browser window still has a major scroll button on it (ie. the regular one on the right of a page).
What I want is for the header to be at the top, the footer to be at the bottom, and for the content to always take up whatever available height is remaining in the browser window. Such that the only scroll buttons will be the Nanoscroller ones within the content div. What I want is something like this:
The code I am using is this:
<body>
<div id="container">
<div id="header">
header
</div>
<div id="mycontent" class="nano">
<div class="content">
my content
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
With this css:
html, body {
margin: 0;
padding: 0;
}
#container {
margin: 0;
}
#header {
text-align:center;
background: #777;
color:#fff;
height:50px;
}
#mycontent {
background-color:red;
}
#footer {
background-color:blue;
clear:both;
height: 50px;
}
I have tried various combinations of making the position fixed for the header and footer, the height set to 100% of the mycontent div, ect and still no joy. I always seem to end up with a little bit too much of the page, such that I'm getting that major scroll bar appearing.
Any thoughts are welcome, thanks.
Use position: fixed instead:
#footer {
position: fixed;
background-color: blue;
width: 100%;
height: 50px;
bottom: 0;
}
body {
overflow-y: hidden;
#mycontent {
overflow-y: auto;
}
html, body {
overflow:hidden;
}
I'm looking for a way to create a div that has a relative size, adjusted to the browser's height. Problem is that I dont really know where to start, or how to do it.
Basically I will have a header, which will be 50px heigh, and the relative div below there. Below that div, theres another div that HAS to be 50px inside the screen (Without scrolling). More content of that div, or another div (I dont mind which one) will be outside the screen.
So if the browser is 1000px heigh, 100px will be spend for the top and bottom divs. That means the relative div must be 900px heigh.
To support the idea I have made a simple image of what I'm willing to achieve: (Yeah, paint skills, got no Photoshop at my current location)
The orange border would represent the size of the complete page.
I know this is pretty easy to do with JavaScript, that wouldn't be a challenge for me, but I'm trying to find a CSS-only solution if possible. Any ideas?
An idea, using % instead of px for header and footer : here
<div id='header'></div>
<div id='content'>
<div id='scrollable'>this is my content</div>
</div>
<div id='footer'></div>
And CSS
body {
height:100%;
}
#header {
width:100%;
height:15%;
position:absolute;
top:0;
background:red;
margin:0;
}
#footer {
width:100%;
height:15%;
position:absolute;
bottom:0;
background:blue;
}
#content {
position:absolute;
width:100%;
top:15%;
height : 70%;
background:yellow;
overflow-y:auto;
}
#content #scrollable {
min-height:100%;
}
So I think this is what you want
<div id="scrn">
<div id="top"></div>
<div id="bottom"></div>
</div>
Then some CSS
#scrn {
height: 1700px;
width: 100%;
position: relative;
}
#top {
height: 50px;
width: 100%;
position: fixed:
top: 0px;
}
#bottom{
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
}
This looks right I think? Also I put the position: relative and height in because I am not 100% sure what you are trying to achieve with it.
Ok! Here's a technique I've used a bunch- this will work best if you don't fix the height of your relative positioned div. Based on your description, this is not the intent so it should work fine.
Basic Markup:
<body>
<header>DIV 1 - 50PX</header>
<div class="main">MAIN STUFF - RELATIVE</div>
<footer>DIV 2 - 50PX</footer>
</body>
CSS:
body, html{
width:100%;
height:100%;
}
body{
margin:0;
positino:relative;
}
header{
position:absolute;
width:100%;
height:50px;
top:0;
left:0;
background:#666666;
color:#ffffff;
z-index:10;
}
footer{
position:absolute;
width:100%;
height:50px;
bottom:0;
left:0;
background:#555555;
color:#ffffff;
z-index:10;
}
.main{
position:relative;
box-sizing:border-box;
padding:50px 1em;
height:150%; /* this is to simulate your dynamic content */
background:#cccccc;
}
http://jsfiddle.net/xdeQ6/1/
Adding padding to the main content div will make sure that your actual content at the top and bottom of your page is not hidden behind the header and footer divs.
Here is my approach:
header, footer {
background: #f00;
position: fixed;
width: 100%;
height: 50px;
left: 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
#content {
margin: 50px 0;
}
See my fiddle: http://jsfiddle.net/Vw97D/1/
Does it meet your expectations?
I’m trying to drift away from using tables and I'm now trying to create a simple div-based layout - header, content, footer divs with 100% width and no parent div. But I'm having a little problem with it. My content and footer divs overlap header div if I ever insert anything there. They appear right in the middle of the header div. If they are empty they appear normally. But the moment I insert header image in it the problem starts.
I tried to change float and display properties, but it gives me strange output. Can anyone help me position them vertically one after another?
Here is the HTML code:
<div id="topDiv"> topmenu</div>
<div id="headerDiv">
<div class="innerDiv"><img src=" photos/header.jpg" /></div>
</div><br /><br />
<div id="contentsDiv"> content</div>
<div id="footDiv"> footer </div>
And here are the css styles:
div#topDiv{
width:100%;
height:20px;
background-color:#800000;
text-align:center;
margin: 0px;
position:absolute;
}
div#headerDiv{
width:100%;
position:absolute;
background-color:#0FF;
text-align:center;
margin: 0px;
}
div#contentsDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#0CC;
position:absolute;
}
div#footDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#CF3;
position:absolute;
}
.innerDiv{
width:930px;
height:100px;
margin:auto;
background-color:#C30;
position:relevant;
}
You are using absolute and relative positioning a lot
and they are making your layout look Bad and elements are over lapping.
Also you don't need to define margin and every other properties many times
html, body{
width 100%;
height:100%;
margin:0px;
padding:0px;
}
div{
display:block;
margin:auto;
}
Horizontal Layout
CSS-Reset
Vertical Layout
Just remove all position:absolute from CSS rules and you are done.
Here is a solution for you. You don't need to specify width=100 Without defining a width, it is 100% by default. Simply specify the width you want for the body and every other container will be that width. float: left; will prevent containers from stacking vertically. They will actually stack horizontally.
Rather than using many Ids for Div, you can simplify the tags with HTML5 tags in such a way as below.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<style type="text/css">
body {
margin: 0 auto;
}
menu {
height: 20px;
background-color: #800000;
text-align: center;
margin: 0px;
}
header {
background-color: #0FF;
text-align: center;
margin: 0px;
}
article {
margin: 0px;
text-align: center;
background-color: #0CC;
}
footer {
margin: 0px;
text-align: center;
background-color: #CF3;
}
section {
height: 100px;
margin: auto;
background-color: #C30;
}
</style>
</head>
<body>
<menu>topmenu</menu>
<header>Header
<article>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/04/1-google-logo-tutorial.gif" />
</article>
</header>
<section>content</section>
<footer>footer </footer>
</body>
</html>
I am writing some css code for a school website that looks like this
body{
background:#000099 url('repeat.png') repeat-x;
margin-bottom:50px;
}
div.wsite-theme{
background-color:#FFFFFF;
border-top:5px solid #AAAAAA;
}
div.wsite-header{
background:#DDDDDD;
border-radius:5px;
}
#wrapper {
width:960px;
margin:0pt auto;
}
#content{
width:850px;
min-height:694px;
position:absolute;
left:98px;
top:150px;
}
#content-main{
width:100%;
min-height:594px;
position:absolute;
top:0px;
}
#navigation{
min-height:1px;
position:absolute;
left:98px;
top:90px;
line-height:2px;
padding:10px 10px;
width:850px;
}
#header{
width:850px;
height:150px;
position:absolute;
top:5px;
left:98px;
}
#footer{
width:100%;
height:100px;
background:#DDDDDD;
position:absolute;
bottom:0px;
border-top:5px solid #AAAAAA;
}
with html that looks like this:
<html>
<head>
<title>{title}</title>
<link rel="stylesheet" type="text/css" href="main-style.css" />
</head>
<body>
<div id="wrapper">
<div id="header" class="wsite-header">
<h1 class="title1">{title}</h1>
</div>
<div id="navigation">
{menu}
</div>
<div id="content">
<div id="content-main" class="wsite-theme">
{content}
</div>
<div id="footer">
{footer}
</div>
</div>
</div>
</body>
</html>
(ignore content in curly bracers. it for the website editor our school makes us use)
So when i go on my page and type in the content it re-sizes and goes behind the footer . However what i intend for it to do is push the footer down as it re-sizes to fit the content. Earlier it was behaving this way, so what am i doing wrong?
EDIT: i guess i wasn't clear enough at first,i want the parent #content div to resize with the content main div so the footer is pushed down
Why are you using absolute position at all? Remove all of the position: absolute from all of your DIVs they are not necessary. Position them using margins instead and you will not have a problem with the DIVs changing size.
As Mathew mentioned, when you use the position: absolute property, it takes that element out of the flow of the document so it will not affect the elements around it. All of your DIVs are in the order you want them displayed, there is no need for absolute positioning on any of them.
Just took out the positioning and messed with the padding of the wrapper to get the same thing you are trying - http://jsfiddle.net/n3Xqx/
Don't use position: absolute;, it takes things out of the regular document flow.
EDIT: If you need to give more vertical spacing between the header/footer/content areas, then use margin
Add position relative to the wrapper.
Replace position absolute to relative for content and footer.
#wrapper {
width: 960px;
margin: 0pt auto;
position: relative;
}
#content {
width: 850px;
min-height: 694px;
left: 98px;
top: 150px;
position: relative;
}
#content-main {
width: 100%;
min-height: 594px;
position: relative;
top: 0px;
}
#footer {
width: 100%;
height: 100px;
background: #DDDDDD;
bottom: 0px;
border-top: 5px solid #AAAAAA;
position: relative;
}
I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is transparent).
I know a lot about css, but cannot seem to figure this one out. I have tried setting overflow to hidden, but I knew it wouldn't work (and it didn't).
This is very hard to explain, so I did the best I could.
html:
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
<div id="content">
testing
</div>
</div>
css:
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
Here's a screenshot of the problem:
Just coming to this late, but in case anyone else runs across this in the future, here's your fix.
Your CSS Code:
.wrapper {
width:100%;
position:fixed;
z-index:10;
background:inherit;
}
.bottom-wrapper {
width:100%;
padding-top:92px;
z-index:5;
overflow:auto;
}
Your HTML:
<div class="wrapper">
...your header here...
</div>
<div class="bottom-wrapper">
...your main content here...
</div>
This will provide you with a header that cleanly matches your site, and floats at the top. The main content will scroll free of the header, and disappear when it passes the header.
Your .bottom-wrapper padding-top should be the height of your header wrapper's content.
Cheers!
You are probably looking for z-index. It allows you to specify the vertical order of elements on the page, so an element with z-index: 10 is floating above (visually) an element with z-index: 5.
Give the content z-index: 5 and see if it works.
I was having a similar issue, and found a solution for my case. It should apply whether you are using a full screen background image, or a solid color (including white).
HTML
<div id="full-size-background"></div>
<div id="header">
<p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
<p>Some text that should be scrollable</p>
</div>
CSS
#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}
This gives me the look of a full page image with a transparent fixed header and when the body content scrolls, it hides behind the header. The images appear seamless.
You could do the same thing with a solid color background, though, arguably, it would have been easier.
2 notes: the header has a set height, I have only tested in FF and Chrome.
Just came up with a new solution to this type of problem that I'm quite happy with.
Use clip-path on the content that needs to hide behind the transparent element. Then update the clip-path dynamically with js on window scroll.
HTML
<div id="sticky">Sticky content</div>
<div id="content">
<!-- any html inside here will hide behind #sticky -->
</div>
JS
window.addEventListener("scroll",function(){
const windowScrollTop = window.scrollTop;
const elementToHide = document.getElementById("content");
elementToHide.style.clipPath = `inset(${windowScrollTop}px 0 0 0)`;
});
Dynamic sticky content
In my case I had an element that I switched to position: sticky after scrolling past it. The #sticky content needs to be relative to the dom elements that came before it until we have scrolled far enough. Here's how I accounted for that:
HTML
<div id="otherStuff">Here's some other stuff</div>
<div id="sticky">Sticky content</div>
<div id="content">
<!-- any html inside here will hide behind #sticky -->
</div>
JS
window.addEventListener("scroll",function(){
const windowScrollTop = window.scrollTop;
const stickyElement = document.getElementById("sticky");
const elementToHide = document.getElementById("content");
const stickyElementTop = stickyElement.getBoundingClientRect().top
if(windowScrollTop >= stickyElementTop){
stickyElement.style.position = "sticky";
elementToHide.style.clipPath = `inset(${windowScrollTop - stickyElementTop}px 0 0 0)`;
}
else {
stickyElement.style.position = "relative";
elementToHide.style.clipPath = "none";
}
});
I fixed this problem using the background property with a color, you can use var even if you'd like to
.header{
width:100%;
position:fixed;
z-index:10;
background:blue;
/* background: var(--my-var-value); You can do this if needed*/
}
Does #header have a set height?
#header {position: fixed; height: 100px; }
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; }
Pretty sure this wouldn't work in IE though...
Fix the position of the content div below the header + overflow-y the content div.
I have fixed background image
The header background is transparent
I don't want my content to override my transparent header
I came up with a solution scrolling the div instead the body:
<div>
<div class="header"></div>
<div class="content"></div>
</div>
.header { position: fixed; ... }
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; }
I too faced similar issue, but solved it using a simple dirty hack
1) have a white image in images folder
2) then add this css in header style
z-index:999; // to make header above the scrolling contents
background-image : url("../images/white.png"); // to hide the scrolling content
3) It is done!!
The header's z-index is set to 1000, so the z-index of the container would have to be 1001 if you want it to stack on top of the header. https://codepen.io/richiegarcia/pen/OJypzrL
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
z-index:1001;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
I was having the same problem. I just used added z-index:10 to the .header in CSS.
I solved this problem by adding another fixed div positioned right under my header with margin-top of the size of my header.
HTML:
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="fixed-container">
Content...
</div>
CSS:
#fixed-container{
margin-top: header_height;
height: calc(100% - header_height);
width: 100%;
position: fixed;
overflow: auto;
}
I was facing the same problem, so the answer that tize gave helped me alot, I created a div right under my header and used some css(z-index, overflow and background), so the main element is scrollable and hid behind the transparent header:
HTML:
<header>
<h1>Hello World</h1>
</header>
<div class="inv-header"></div>
<main>Content Here...</main>
CSS:
header{
position:fixed;
background:rgba(255,255,255,80%);
top:0;
width:100%;
z-index:10;
}
.inv-header{
position:fixed;
top:0;
height:12.8%;
width:100%;
background:inherit;
}
main{
margin-top:5.9%;
padding-top:1%;
overflow:auto;
}