I have following problem.
I'd like to have header (position:fixed) and some text in article section and between this to section some space.
My CSS code :
header
{
position: fixed
margin-bottom: 10px; // <-- space I'd like to have
}
My HTML code:
<body>
<header> HEADER </header>
<article> SAMPLE TEXT</article>
</body>
But now it looks like header and article are overlapped.
http://jsfiddle.net/LvKSm/embedded/result/
So How to make this space/margin between this to section ?
You need to use margin on article tag
header {
background: #ddd;
position: fixed;
top: 0;
/* width: 100%; */ /* You would probably need this */
}
article {
margin-top: 50px;
}
Demo
Demo (Updated demo of the fiddle you created)
Some Explanation, you are using margin-bottom on header tag, which is a fixed position element, now when you make any element fix, it just gets out of the document flow, and your margin won't have any affect on any element on your document whatsoever.
Also remember to use top: 0; for the header element or when you will use margin-top on article, it will also take header element along.
P.S Commenting using // is invalid, you need to use /* Comment goes here */
This is probably what you want. You need to set a margin on the element following header with a value that equals the header + 10. You have to do this, because the element header has a position fixed which "removes" it from the natural flow of the document, i.e. it will sit on top of the rest of the content, and the other content ignores it. Therefore, article ignores the position of header and takes up its place.
header {
position: fixed;
height: 100px;
width: 100%;
background: red;
top: 0;
}
article {
width: 100%;
margin-top: 110px; /* height header + 10px */
background: blue;
}
If the height of the header is dynamic, you can set the margin-top of the article with jQuery (or JS). Fiddle.
$("article").css({
"margin-top": $("header").height() + 10
});
Edit: I edited your Fiddle, which now works just fine.
The best thing to do here would be applying padding-top to your body tag. SEE THE DEMO
body {padding-top: 120px;}
While also not forgetting to give top: 0; to your header tag since it has a fixed position which is also the reason why margin-bottom won't work for it.
Related
Making the header { position:fixed } in a basic
<header></header>
<article></article>
<footer></footer>
layout, causes some quirks, since the article now starts at top = 0 such that its content is hidden by the header. A common workaround is to set the article's padding or margin equals to the header height. And here lays the problem: Assuming some header size is risky. Javascript can be used to measure the header heigth and set the padding accordingly, but this is not pure css. Duplicating the header with { visibility: hidden, position: initial } is the best pure CSS solution I found:
http://codepen.io/parkerbennett/pen/lzqEH
or here at position fixed header in html (#James in a comment)
Question: In the year 2017, is there a pure CSS (no JS) solution without duplicating the header, that avoids this workaround?
I came up with this flex solution, but it is not perfect and therefore does not beat the workaround above (which from user perspective is perfect):
<html>
<head>
<title>lab</title>
<style>
/* reset */
body, div {
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
article {
display: flex;
flex: 1;
overflow: auto;
}
</style>
</head>
<body>
<header>header text</header>
<article>
scrollable text
</article>
<footer>footer content</footer>
</body>
</html>
The problem here is, the scrollbar does not go over the full browser window height, but only along the article height.
I also thought about using CSS3 calc() but we cannot measure the height of the header and use this as margin inside the article-css.
It can easily done by setting the position fixed. Have a look CSS:
.ccsticky-nav {
width: 100%;
height: 60px;
position: fixed;
top: 0;
background: #139ed8;
}
For more details you can see article and demo here http://codeconvey.com/create-simple-pur-css-sticky-header/
Yes, you can use sticky positioning. This should keep the header at the top of the page and allow its size to affect the flow of the page:
header {
top: 0;
position: sticky;
}
However, it does not yet have great browser support:
http://caniuse.com/#feat=css-sticky
My header doesn't appear anywhere. I would like to know how to fix it.
body {
background-color: antiquewhite;
font-size: 100%;
width: 100%;
height: auto;
}
nav {
height: 8%;
width: 100%;
position: fixed;
display: block;
background-color: grey;
z-index: 1000;
}
header {
width: 100%;
background-image: url("https://placehold.it/50/50");
}
<nav>
<h1>...</h1>
</nav>
<header>
</header>
This would do the trick:
html, body {height:100%;}
if you use percentage for height the parent needs to have a fixed height (so actually it's 8% of something) or at least ALL parents till html tag need to have a percentage height.
The header tag has no contents, and therefore 0 height. Try adding some text inside the header tags or add a height with css.
My first thought would be give that header element some (html-)content (like text) or specify a height explicitly as of my experience container elements are not "shown" when their boundaries are not declared in any way.
Otherwise you may have a look here as this seems to be the same problem basically to me.
If you are using e.g. Firefox, you can use rightclick->inspect element to see if the element is simply not rendered (i.e. because of no height) or otherwise trace the applied css, manipulate css in place (non permanent) or even debug javascript.
Hope this helps.
I am currently encountering a tricky issue with hashed anchor links.
Here is a simple representation of my HTML code :
<div class="main-wrap">
<header></header>
<aside>
<nav>
<ul>
<li>Article1</li>
<li>Article2</li>
<li>Article3</li>
</ul>
</nav>
</aside>
<section>
<article id="article1">Content Here</article>
<article id="article2">Content Here</article>
<article id="article3">Content Here</article>
</section>
<footer></footer>
and the CSS :
body{overflow: scroll;}
.main-wrap{
overflow: hidden;
position: relative;
}
header{
position: relative;
z-index: 3;
height: 10vh;
}
aside{
position: fixed;
width: 22%;
height: 84vh; /* Equal to 100vh - (header + footer)vh */
top: 10vh;
left: 0;
bottom: 6vh;
}
section{
position: relative;
min-height: 84vh; /* Equal to 100vh - (header + footer)vh */
width: 78%;
left: 22%; /* Equal to aside width*/
}
footer{
position: relative;
z-index: 3;
height: 6vh;
}
I've created a sidebar menu with hashed links to have a scrolled navigation, wich as far as I've been is working. But when I'm clicking on the hashed anchors, all the elements are moving a little further top, including header and footer and are hidden by the overflow:hidden; property of the .main-wrap element. In addition when I go back to the non-hashed page, the issue is still running unless I reload it.
I can't find any clue of how I can fix it. Any ideas ?
Edited : I also use a reset.css that is setting the body and html padding and margin to 0.
Edited 2 :
I think I know what's going on. By clicking on an anchor-link the body is forced to scroll the .main-wrap div and that's why everything looks like it has moved top. In fact the overflow:hidden; property of .main-wrap has just moved a little further down and is hiding the wrong parts.
Default Browser Behavior:
When you click on a named or hashed link, the browser will try to scroll to have the target named link at the top of the view.
This is what is happening with your code too.
Another browser default:
Most browsers have default margins and padding greater than 0 for the HTML elements, including the html and body elements.
Your calculation of height: 84vh; /* Equal to 100vh - (header + footer)vh */ will cause the content height to be more than the viewport height if the html and the body tags have margins or paddings greater than 0 (and make it scrollable since you have body {overflow: scroll;}).
Solution:
Use a css reset, or in your case simply add this to your css
html,
body {
margin:0;
padding:0;
}
Demo https://jsfiddle.net/vkrhnf75/1/
While I nailed down a padding of 50px below my body previously, I am still having problems with a bunch of white space sitting below my footer on my pages. Do I merely need to make my content longer to fill the vertical space? I'm using bootstrap for the first time to create my new site and I am left with this annoying dilemma. here's a link to an offending page:
http://preview.yourgreatwebsite.com/ecom.php
I bet someone will look at this and show me something I'm not seeing in Firebug (or beyond Firebug). I've been looking at it for too long!
More than likely if you are using the sticky footer template from the bootstrap page you are dealing with the margin below text that is pushing the text inside the footer div further up and therefore pushing its parent element up too. I had the same issue. An easy way to fix this would be to add the following code inside one of your stylesheets.
.footer p { /* Selects text inside a <p> tag that is inside a .footer <div> */
margin-bottom: 0; /* removes default <p> tag margin from the bottom */
}
Add some bottom padding (exactly the height of your footer) to the footer's parent element which is body in your case:
body{
....
padding-bottom:70px;// You can adjust it
}
and make your footer's position absolute
.footer-main {
background: #81ccfb;
padding: 1em;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
Simply remove the default Bootstrap padding from the bottom of the page:
body
{
padding-bottom:0;
}
I am using Angular with Bootstrap 5 and experienced the problem with . I added a style in the body as follows and problem went away
<body style="height: auto;">
<app-root></app-root>
</body>
You could use flexbox to fix the layout.
Css
body{
display:flex;
flex-direction: column;
}
.navbar {
order:1;
flex-shrink:1;
}
.headerstrip {
order:2;
flex-shrink:1;
}
.container {
order:3;
flex-grow: 5;
}
.footer-main {
order: 4;
flex-shrink: 1;
}
If in chrome dev tools you see that the body of the footer and the footer have different dimensions. You could add negative margin bottom to the body. It is a quick fix.
<body class="mb-n4">
</body>
This worked for me, perhaps it can help someone.
Well, the same happened to me. Turned out I was dropping the elements into the header element, instead of dropping them into the body element. If anyone has the same problem, then try dropping them into the body tag within the overview panel. A lot more accurate.
Simply add this to your footer class (in your case: .footer-main):
position: absolute;
bottom: 0;
Quick explanation: it will set your footer as a floating block, which position doesn't depend on other elements, and then it will stick the footer to the bottom of the page.
I have a wrapper class that contains all the content on the web page. the problem is if the content is absolutely placed, it eats my footer. I have to place the content as absolute positioned.
It seems like the footer doesnot recognize that the content is absolute. Heres my code
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="activity/Chrysanthemum.jpg" style="z-index: 1; position:absolute; width: 420px; height: 400px; left: 100px;top:260px; ">
<div class="push">
</div>
</div>
<div class="footer" >copyrights</div>
</body>
If I change the image style by removing the position:absolute property , everything looks normal. so my question is how can we place the footer at the bottom with absolute positioned contents?
Updated answer, regarding comment.
As I mentioned at my previous answer, this effect cannot be achieved using pure CSS. So, I will show the JavaScript approach. Add relevant IDs (see Fiddle), and add the following code at the end of your body. This code snippet will resize your wrapper when necessary.Note: When the page is smaller than the window's height, the page wrapper will still take the full height, because it's not possible to distinguish a height change by an absolutely positioned element.
<script>
(function(){
var wrapper = document.getElementById("wrapper");
var height = document.documentElement.scrollHeight;
wrapper.style.height = height + "px";
})();
</script>
Previous answer:
The issue is caused by the fact that absolutely-positioned elements do not affect the height/width of their parent.
To fix your code, apply the following CSS (only showing relevant CSS, updated postfixed by descriptive comments). Fiddle: http://jsfiddle.net/4ja2V/
html, body {
height: 100%;
width: 100%;
padding: 0; /* Get rid off the padding */
}
.wrapper {
position: relative; /* Necessary to properly deal with absolutely positioned
child elements. */
height: 100%;
margin: 0 auto 4em; /* So that the content is visible when scrolled down*/
}
.footer {
height: 4em;
position: fixed; /* Positions your footer at a fixed position in the window*/
bottom: 0; /* At the bottom of the window*/
}
You were using a negative bottom-margin for .wrapper, which caused the element to "eat" the footer. When you're using absolutely poisitioned inner elements, there's no reliable pure-CSS method to get the real width/height of the .wrapper element. Hence the appearance of position:fixed.
The footer is defined to have a height of 4em. Because the footer is positioned at a fixed position (ie, the element won't move when scrolling down), it's necessary to apply an additional margin at the bottom of the wrapper element.
give your footer a fixed hight and then in your absolute class, do
bottom: heightOfYourFooter + 5px;