I am using the sticky footer method for Bootstrap 3.0 as described in their example. I have it working fine and that is not what I am struggling with.
It calls for the wrapper to have the following:
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
Now I am trying to have some 100% height containers inside that and I can't because there is a height of auto on the parent. Is there a way to get around this and keep my sticky footer? I want to put 100% height containers that stretch so I can put backgrounds in them.
Thanks
I'm not quite sure if this solution fits your needs, but it involves absolute positioning a div behind the sidebar and making it stretch the height of #wrap by setting top and bottom to 0. It essentially inherits the height while avoiding explicitly declaring a height property. The only potential problem would be if you have other elements that are above the sidebar (i.e. headers) since the div will also be stretch behind those as well.
http://jsfiddle.net/qaB8D/
#wrap {
position: relative;
}
aside, #words {
/* This is just so the sidebar stays left, and the text stays right */
display: table-cell;
}
aside {
width: 100px;
}
aside:before {
content: '';
position: absolute;
background-color: red;
top:0;
bottom: 0;
width: inherit;
z-index: -10;
}
/* include Sticky Footer code/*
Related
I would like to have a border bottom that is overrule the container width to the right. So I have two colomns of six col-md-6. The right one has an article as a child. That article has a border-bottom of one px. That should reach the window viewports right. See image bellow:
As you can see, the right vertical line wil show the container end. There should stop the content and let text for example position on a new line. But the border should overrule that so it will reach the viewport right.
Oh and I make use of bootstrap grid if that was not clear!
Code in progress:
http://codepen.io/anon/pen/gaewLB
Borders can't extend beyond their element.
BUT you can use a pseudo-element instead; like so.
.page header,
.page article {
padding: 60px 30px;
/*border-bottom: 1px solid #c2c2c2; */
position: relative; /* positioning context */
}
body {
overflow-x: hidden; /* prevent scrollbars */
}
.page header::after,
.page article::after {
content: '';
position: absolute;
top:100%;
left: 0;
height: 1px;
background: #c2c2c2;
width: 100vw; /* or some other large px/em value */
}
Codepen Demo
i want do fixed page height without scrolling, header fixed on top, and fill center to the remainder of the page. Center area will be have own scrolling bar when content overflow.
I set height 100% for central div, but this height ≠ height free space between top and bottom blocks.
What can i do? Many thanks!
Look code on jsfiddle
I have made a js fiddle which i have created with the points that i have understood from your problem.
I am using jquery $( window ).height() for getting browser viewport height.
By subtracting the height of header and footer (50px + 50px =100px) from browser viewport height i will get the height of extra space.
This height will be equal to the content height.
check the fiddle
http://jsfiddle.net/bnx4uuse/1/
html,body {height:100%; }
* { padding: 0; margin: 0; }
body { border:1px solid blue; }
#head {background-color:#FC6; height:50px;position:fixed;top:0px;width:100%;}
#center {background-color:#3CC; height:100%;margin:49px 0px; }
#foot {background-color:#9C0; height:50px;position:fixed;bottom:0px;width:100%;}
fiddle: http://jsfiddle.net/9xrz9mbf/4/
Add a wrapper div around your center div.
Set it to full screen and pad:
height: 100%;
width: 100%;
padding-top: 150px; /* size of your header */
padding-bottom: 100px; /* size of your footer */
On your center div you set overflow:
overflow: auto
The overflow property hides the extra content and adds a scrollbar to your div.
You header will have:
height: 150px; /* your desired size */
position: fixed; /* or absolute */
top: 0px;
Your footer will have:
height: 100px; /* your desired size */
position: fixed; /* or absolute */
bottom: 0px;
Then you have a "full-screen" app (full-window in that case)
I am looking to keep an element at the bottom of a sidebar. To achieve that, one of the easiest solution would be:
#container
{
position: relative;
height: 100%;
}
#bottom-element
{
position: absolute;
height: 20px;
bottom: 0;
}
The result of this code is going to be:
However, I also need to keep the sidebar responsive. And since an absolute position removes the #bottom-element from the flow, if the sidebar's height becomes too small, the #bottom-element is going to cover the blue elements, instead of creating a scrollbar.
So my question is:
How to keep the red element at the bottom of the sidebar, while keeping it at the bottom of the blue elements list when the sidebar is not tall enough?
Just add some bottom padding to the container equal to the height of the absolutely positioned element:
#container
{
position: relative;
height: 100%;
padding-bottom:20px;
box-sizing: border-box;
}
#bottom-element
{
position: absolute;
height: 20px;
bottom: 0;
}
Update you might also want to add box-sizing: border-box to stop the padding being added to the 100% height. I've updated the CSS with this.
I am trying to create a bottom aligned, fluid width sticky footer that contains three links that are the same height as the container, which also have fluid widths.
I have created a top aligned version of this footer, where the links are not the full height of their container. It breaks if I set the bottom of the container to zero. I have put the code for this here:
http://jsfiddle.net/bHJR3/1/
How can I modify what I have so the bottom edge of the container is flush with the bottom of the window, and the links are the same height as the container?
I know how to do this through jquery but I am trying to avoid js if at all possible.
Thanks for any help.
EDIT:
Here's a jquery solution I came up with in case of no answers if anybody wants to see it. http://jsfiddle.net/bHJR3/2/
The reason it broke when you set bottom: 0 on #footer is because everything inside #footer had position: absolute. Absolutely positioned elements do not take up any space in the document flow and will not cause their parent elements to expand to contain them. Setting a height on #footer solves this. Setting height: 100% on the a tags will cause them to size relative to their parent element. You can keep div.content, but you would also have to set height: 100% on it.
Add the following CSS to #footer:
bottom: 0;
height: 90px;
Add the following CSS to A:
height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */
Remove div.content. It doesn't seem necessary here.
Edit
You can center the footer by adding/changing the following CSS on #footer:
width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */
Edit
You can use max-width and a media query to alter the styling of the footer if the window width is < 640px:
#footer {
position: fixed;
width: 100%;
max-width: 640px;
height: 114px;
bottom:0;
left: 50%;
margin-left: -320px;
}
#media only screen and (max-width: 640px) {
#footer {
margin-left: auto;
left: 0;
}
}
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;