I want to make a website where the (dynamic in height) header and footer have a fixed position. The content should start directly beneath the header. I made a quick example. (Yellow and red top positions are the same, I want the yellow DIV to start beneath the red DIV.)
If you set the header position to fixed, the content DIV is placed at the same top position of the header.
For example, if you use float, you can use clear: both to reset the position, is there also a possibility for position: fixed?
I know this is an old post, but have recently come across this issue myself. So just thought I would share my solution (although I haven't fully tested it yet - add disclaimer here).
I created another container (div) below the fixed one (top of page), with the same settings, class etc and content.
Then I added a style to reset this second div to position:static, visibility:hidden. You don't really need to hide it, as it is completely covered by the fixed div; but just in case it's an older browser which doesn't recognise position:fixed.
Anyway this will give you a buffer area above your content that should always be the correct height. Downside is that if there is dynamic content then this will be included twice in your page for this area, but you need that content to make sure the hidden div is the right height.
Not a perfect solution, but the best I can come up with ... bar using javascript.
CSS Only Solution
Use some way to pad the space the header takes up at the top of the screen:
padding-top:
margin-top:
position:relative + top:
Then have a separate CSS style sheet to change height for regular viewports versus mobile viewports.
(Or see below for JavaScript solution to set the height attribute dynamically.)
jsFiddle
HTML:
<html>
<body>
<div id="header">
Header
</div>
<div id="wrapper">
<p>First Row</p>
<p>Next row</p>
<p>...</p>
<p>Last row</p>
<div>
</body>
</html>
CSS (regular version):
#header {
position:fixed;
height:100px;
width:100%;
background-color:green;
color:white;
}
#wrapper {
position:relative;
top:101px;
}
CSS (mobile version):
#header {
height:50px;
}
#wrapper {
top:51px;
}
JavaScript Solution
HTML (copy-and-paste-able):
<head>
<style>
#header {
position:fixed;
height:100px; /* try different values here! */
width:100%;
background-color:green;
color:white;
}
#wrapper {
position:relative; /* look Mom no height! */
}
</style>
</head>
<html>
<body>
<div id="header">
Header
</div>
<div id="wrapper">
<p>First Row</p>
<p>Next row</p>
<p>...</p>
<p>Last row</p>
<div>
<script language="javascript">
document.getElementById('wrapper').style.top = String(document.getElementById("header").offsetHeight + 1);
</script>
</body>
</html>
use z-index (css)
for one div make it: z-index:-1;
for other z-index:1;
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I think what you want is to add a margin-top that's equal to the height of your header. Do the same for margin-bottom to accommodate the footer.
You have to use padding-top and padding-bottom. In your example, if you add padding-top: 25px; to the style, it will display under the top fixed div.
As you know, a fixed position shows in the same spot on the browser and doesn't move as you scroll. The rest of the "normal" content is not affected by fixed positioned elements, so you have to use padding and margin to create some buffer space.
<body>
<div style="background-color: red; position: fixed;width:100%;">This is a test with position set to fixed</div>
<div style="background-color: yellow; height: 1000px;">This is content that should start beneath the fixed DIV</div>
</body>
Related
I want a horizontal bar at the top of HTML page. It should always be at the top of the screen, So I made this:
<body>
<div id="message_bar" style="position: fixed; top: 0px; width: 100%; z-index: 1000;">
</div>
<div class="other_divs" style="width: 100%; float: left;">
</div>
</body>
Now, this bar should not cover the rest of the body. If I knew the height of it, let's be 50px for example, I would do it by:
<body style="padding-top: 50px;">
But unfortunately, the height of this message_bar is variable and unknown (It's contents are set dynamically at server-side).
Is there any way to solve this problem purely by CSS?
Thank you very much.
P.S.
This message_bar would display like menu bars in windows applications: they are always at the top, and they never cover the main body. In fact, vertical scroll bar starts from "other_divs".
UPDATE 2:
Hey, Unbelievable! I guess I've managed to create the potential layout for a horizontal menu bar, purely with CSS. Here is my solution thanks to the power of vh:
<body>
<div style="display:block; width:100%; height:95vh !important; overflow:hidden;">
<div id="message_bar" style="float:left; width:100%; display:block;" >
this text appears always on top
</div>
<div style="float:left; width:100%; height:100%; display:block; overflow:auto;">
<div id="main_content" style="background:blue;">
Here lies the main content of the page.
<br />The below line is a set of 40 list items added to occupy space
<ol><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li></ol>
</div>
</div>
</div>
</body>
I checked it in Chrome,IE, and FireFox, and it worked neatly!
Anyway, I must thank the community here; Even when no answer is provided, the discussion and different viewpoints stimulate thinking process and eases solution finding.
The only way to solve this with purely CSS is adding a duplicate of the bar at the top of the page with position: relative and a lower z-index. This duplicate bar would always be hidden behind the fixed one (you could use opacity: 0; pointer-events: none if needed) and would push the rest of the page down. However this solution is very ugly as it adds a lot of HTML.
I recommend using JavaScript with jQuery for a pretty easy solution.
$(document).ready(function() {
$('.wrapper').css('padding-top', $('.message_bar').outerHeight());
});
And create a wrapper div around the content of the page (<div class="wrapper">Content...</div>). Alternatively, you could apply the padding to the body.
I am interested in your question, thanks for your information of the value of vh and vw. When I read your UPDATE 2. I found there is still something can be improved. The following is:
I change overflow:scroll; to overflow:auto. Because when your page haven't enough height. The value overflow:scroll will create a gray scroll bar. That is unfriendly for user.
I remove the most outer layer <div style="display:block; width:100%; height:95vh !important; overflow:hidden;">...</div> and retain the others. In other word, not to use vh also can be resolved your question.
There is my JSFIDDLE. (NOTICE: the JSFIDDLE is not achieve the effect that the above following. Copy these code on your native browser. I think this reason is about virtual circumstance compatibility. It worked in chorme & Firefox & IE 10)
You can have a class where are no scrollbars and then the position property will be position:absolute;
but if you want to keep this topHeader fixed in case of scrolling you have to use .fixed class
.topHeader {
background:#345;
color:#FFF;
height:50px;
padding:.5em;
position:absolute;
top:50px;
width:100%;
}
.fixed {
position:fixed;
top:0;
}
...and you some javascipt to bind scrol event:
var pixels= 50; //in pixels
$(window).bind('scroll', function () {
if ($(window).scrollTop() > pixels) {
$('.topHeader ').addClass('fixed');
} else {
$('.topHeader ').removeClass('fixed');
}
});
Why don't you just use relative positions? Remove position: fixed;. That's how it looks like:
http://jsfiddle.net/darekkay/8ab6uw7n/1/
Edit: I don't think, you can achieve this with pure CSS, if you don't know the height of the message. But you can use jQuery:
$("#message_bar").show(function() {
$( ".other_divs" ).css("margin-top", $(this).height() + "px");
});
http://jsfiddle.net/darekkay/8ab6uw7n/2/
I am playing around with bigcommerce at the moment and I am trying to recreate the footer structure for the header. You can see here:
http://thespeedfactory.mybigcommerce.com/
If you look at the footer, how it is full width but the content is central within it.
I want the header to be exactly the same, black with pink/white highlights.
Ive tried moving around the structure within bigcommerce, but I am having a brain failure in getting it to do and look how I want despite knowing it is based around containers and margins.
Any guidance is appreciated.
If I understand you correctly, you want:
the header (#Header) to span the entire width of the page
the footer (#ContainerFooter) to span the entire width of the page
the header (and footer to have the same styling (colors, etc.)
the content area (#Wrapper) to stay a fixed width and centered on the page
To do this, add the following css:
#Container {width:100%;}
#Header {width:100%; margin:0, auto;}
The above css allows the header (by way of its parent container) to stretch the width of the browser page. You'll notice #Wrapper is shifted to the left. Add this:
#Wrapper {margin:auto;)
This centers the #Wrapper.
Your structure should be in place and now you can add your colors, etc. to the #Header to make it match the footer.
This is pretty basic html/css.
Just create a div, place a container in it and start styling.
HTML:
<div id="header">
<div id="container">
<p>content</p>
</div>
</div>
CSS:
#header {
width: 100%;
height:400px;
background:black;
position:absolute;
border-top:3px solid #ff25a7;
}
#container {
width:90%;
height:300px;
margin:0 auto;
}
#container p {
font-size:30px;
padding:10px;
color: #ff25a7;
}
Here's a jsFiddle to help you get started.
You can try giving the header the same class as the footer and afterwards (if the footer's position is absolute bottom), set the position to absolute top:0px;
I have a variable-height header. I want the content div below it to extend the full height of the window. But if I set the content div to height 100%, the content div goes off screen (because of the header height) and introduces a scroll bar.
I know that this can be done for fixed headers, see (http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/) but I think his method (absolute positioning with top and bottom set) won't work for a variable height header.
There is a solution using table display (http://stackoverflow.com/questions/8555820/) but I want to support IE7.
So to sum up:
Header is variable height
I want the content div to extend to the bottom of the window
I don't want a scroll bar unless it's actually required
I already know how to do this in JQuery if there isn't any pure css solution
Below is example code that shows the problem:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body { height: 100%; }
#header { background-color: yellow; }
#content {
background-color: gray;
height: 100%;
}
</style>
</head>
<body>
<div id="header">
<h1>A Heading</h1>
</div>
<div id="content">
<p>A paragraph.</p>
</div>
</body>
</html>
This might be an over-simplification, but you could fake the content area's height by setting the background-color of the body to the same colour, i.e.: gray.
That way,
Even though the content doesn't stretch to the bottom of the page, it would seem like it does.
When the content does go beyond the vertical limit, the body will stretch with it.
You can use overflow property to remove scroll bar. But your content has to fit one page.
html, body { height: 100%; overflow: hidden;}
Otherwise I think you'll need JavaScript to do that.
Whenever I come across a problem like this, I try to re-factor the page so that the <body> ends up being the full-height element with all the scrolling.
You could position:fixed the header to keep it on top, then allow the body to scroll with the content. You could do the same with a sidebar or other elements.
Have you thought about refactoring your html so that the header is within the "content" div? That way the header will still be variable height and the content div will still fill the page. The only issue would arise if you need to style the borders of your content div. Would something about your intended layout prevent this from being a good solution?
e.g.
<body>
<div id="content">
<div id="header">
<h1>A Heading</h1>
</div>
<p>A paragraph.</p>
</div>
</body>
...and if you're going that far, you could always just remove the content div altogether and place everything within the body, which is 100% height anyway :
<body>
<div id="header">
<h1>A Heading</h1>
</div>
<p>A paragraph.</p>
</body>
I am making the layout of a web page that I want it to have the same look in all screens. The page I am working on, has three parts, header, main, and footer, which I want to header to be on the top of the screen. main and footer sticks to the bottom of the page.
Here is what I want to do:
I made the header to in the top but I couldn't add percentage to the main and footer section.
Also in the header there is a div which called 'div5', I want it to sticks at the bottom of the parent div which is main or middle box.
in the footer I have three boxes which want to have them in left, right and center.
Can you have a look at the linked site and let me know how to fix these problems.
percentage heights only work if you set the parent element to have a height.
( the elements will ask "percentage of what?" )
Here we set a height to the body
css
<style type="text/css">
html,body { height:100%;}
#header { display:block; height:10%; }
#main { display:block; height:80%; }
#footer { display:block; height:10%; }
</style>
markup
<body>
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
By doing these you are making you div 2,3 & 4 overlap. make sure that even that is taken care of. and Yes you must consider an option of Css media queries. Please go through the demo here
How do you get a div position fixed where it also doesn't overlay on top of another div?
For example:
<html>
<body>
<div style="background-color:black; height:200px;">
</div>
<div style="background-color:blue; height:400px;">
</div>
</body>
</html>
What I want is for the top div to always be at the top but not to block any part of the bottom div. For an example: http://twitter.github.com/bootstrap/
The black menu at the top always stays at the top while not obscuring the view of any other div. I examined the topbar css on that website and plugged it into my own test document but I can't get the desired effect. What else do I need to do besides "position:fixed;"?
The top bar in your example does start obscuring things once you start scrolling. However, in your case, I think you should just add a padding to the top of your body equal to the height of your black bar. That way, everything is pushed down and it won't cover anything else up.
Here is a simple example of how it could be done
http://jsfiddle.net/fk3wY/3/
So basicly:
body {
padding-top:40px;
}
#top {
position:fixed;
top:0px;
left:0px;
height:40px;
width:100%;
}