I have a sticky footer that needs to re-position when the site content grows. Currently when my textarea grows to a certain point, it simply underflows the footer, and that footer is staying as it is.
What is the best way to respond to an element resizing in height? I have seen some stuff using animation frames and such. But all that I want to do is re-calculate the position of my footer each time a resize event is fired.
Ryan Fait's sticky footer:
* {
margin: 0;
}
html,
body {
height: 100%;
}
main {
min-height: 100%;
height: auto !important;
/* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px;
/* the bottom margin is the negative value of the footer's height */
}
footer,
.push {
height: 155px;
/* .push must be the same height as .footer */
}
footer {
height;
155px;
background: gray;
}
textarea {
height: 100px;
width: 200px;
}
<main>
<textarea></textarea>
<div class="push"></div>
</main>
<footer>
</footer>
Related
I'm having a bit of a problem with this design. The page is supposed to start with an image that is focused in the middle of the viewport, then you scroll down below the fold to see more content. I have it working with the code below but there's one issue. The scrollbar throws the viewport image off center. Does anyone know how to fix this? keep in mind, I still want the scrollbar there.
I don't know if this is possible. But could I use jquery to subtract the scrollbar width from the site only if scrollbar is active? I don't really know how to use jquery though. And I feel that if I subtract scrollbar width from 100vw then the site will look off on mobile when there is no scrollbar.
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
overflow-x:hidden;
}
#abovefoldcontainer {
background-color: red;
width: 100vw;
height: 100vh;
}
#abovefoldimage {
background-color: #6FF;
position: relative;
left: 150px;
top: 150px;
width: calc(100vw - 300px);
height: calc(100vh - 300px);
}
#belowfold {
}
<html>
<body>
<div id="abovefoldcontainer">
<div id="abovefoldimage">Content goes here</div>
</div>
<div id="belowfold">
Content goes here too<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
I have a canvas in my page, and i want it to fill the page until it reaches the bottom of the page.
I have the canvas' width set to 100%, but i cannot set the height to 100% as it extends too far.
The position of the div is not 0,0 of the browser window there are other things above it, so i end up with a scroll bar because 100% height extends well below the bottom of my browser's output.
So i was wondering how can i extend the element's height to reach the bottom of the page from its current position on the web page?
<style>
.canvas{
position:absolute;
width:100%;
height:100%;
}
<style>
<div class="logo">Stuff here</div>
<div class="output">
<canvas class="canvas"></canvas>
</div>
Do i need to use JavaScript or is there a CSS method to doing this?
If you know the height of the content above the canvas, you can use top and bottom properties to take up the rest of the space:
JS Fiddle
.logo {
height: 40px;
}
.output {
position: absolute;
top: 40px; // height of above content
bottom: 0;
width: 100%;
padding: 0;
}
.canvas {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
And if you don't know the height of the above content, you can calculate it:
JQuery Example: JS Fiddle
var height = $('header').height();
$('.output').css('top', height);
this technique is also great when making resizable popups with fixed height headers and footers, but fluid height content
https://jsfiddle.net/ca5tda6e/
set the header (.logo) to a fixed height
.logo{
height: 100px;
background-color: lightGray;
position: relative;
z-index: 1;
}
then position the content (.output) absolute, with a padding-top: 100px
.output{
width: 100%;
height: 100%;
box-sizing: border-box; /* so that padding is included in width/height */
padding-top: 100px; /* padding-top should be equal to .logo height */
position: absolute;
top: 0;
left: 0;
overflow: hidden; /* there was like a pixel of something i couldnt get rid of, could have been white space */
}
I've had this problem before, in CSS, create this rule....
html, body {
margin: 0;
}
I have a problem with sticky footer which has absolute position,
<div class="wrapper">
<div class="content">
<p>Content</p>
</div>
<div class="footer">
Footer
</div>
</div>
body {
height: 100%;
min-height: 100%;
overflow: hidden;
width: 100%
}
.wrapper {
position: absolute;
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
width: 100%;
overflow: auto;
background: blue;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
When I do scroll down my footer also scrolled, when I remove height:100% footer works fine but I need height:100% for my scroll bar for wrapper because I disabled it in body (I need do it). I want to retain height:100% for body and .wrapper but that footer was always at bottom. How can I do it using css ?
i got the same issue, use height: 100vh; i hope works for you!
If you need your footer to always be at the bottom look at this fiddle: http://jsfiddle.net/2n9okg1b/3/
In the fiddle I amd using poition: fixed; in the footer CSS. Fixing the position tells the browser to always keep the elements where you defined them to be.
Update
I have updated the fiddle link. http://jsfiddle.net/2n9okg1b/3/
With this update I detect with jQuery if the footer is below the window. If the footer is below the window I set the footer position to fixed. If the footer is not below the window I set the footer's position to relative. This allows the footer to always be at the bottom of the content or at the bottom of the window.
The issue I'm having may have a different and simpler solution than the one I'm attempting, so I'll explain in full so people can offer other answers.
I'm building a responsive theme on a platform similar to Shopify, in which clients will be taking widget areas and filling them with content of their own. In the footer I've got 3 divs one of 25% width to the left, one of 50% width in the center, and another of 25% to the right. I don't use the term float for now, because I'm wanting the center div (50%) to go 100% width and take the highest position when the resolution <= 992px (Bootstraps col-sm breakpoint).
This code demonstrates what I'm trying to do. It may not be possible with pure CSS, so feel free to offer any solution you can think of.
HTML
<div class="center-div">
/* user content of varying height */
</div>
<div class="left-div">
/* user content */
</div>
<div class="right-div">
/* user content */
</div>
and CSS
.center-div {
width: 50%;
margin: 0 auto;
margin-bottom: /* negative and equal to the height of the user's content */
}
.left-div {
width: 25%;
float: left;
}
.right-div {
width: 25%;
float: right;
}
#media (max-width: 992px) {
.center-div { width: 100%; margin: 0px; }
.left-div { width: 50%; }
.right-div { width: 50%; }
}
* EDIT *
Never mind folks. I'm making this entirely too difficult. About a minute after posting this I realized I could just wrap it all in a relative div and give the left and right divs absolute positioning until the break point.
Fiddle for the curious
However, feel free to answer the question if you want, because I'd like to know if this is possible.
Put first Divs Float Left and Right, and then the Content.
If there's space between Left and Right floated divs, Content will fill it. (L:25 / C:50 / R:25)
If not, Content will break. (L: 50/ R: 50 // C:100)
<div class="left-div">
/* user content */
</div>
<div class="right-div">
/* user content */
</div>
<div class="center-div">
/* user content of varying height */<br>
/* user content of varying height */<br>
/* user content of varying height */<br>
/* user content of varying height */<br>
/* user content of varying height */<br>
</div>
CSS:
.left-div {
background-color: #a99;
float: left;
width: 25%;
}
.right-div {
background-color: #9a9;
float: right;
width: 25%;
}
.center-div {
background-color: #99a;
}
#media (max-width: 992px) {
.center-div { width: 100%; }
.left-div, .right-div { width: 50%; }
}
To all divs have same height in all occasions:
$('.left-div, .right-div').height(function(){
return $('.center-div').height();
});
FIDDLE
There're 2 divs - top and bottom.
The bottom should serve as a 'buttons pane', so visible and 'pinned' to bottom border at all times. root div is a Kendo UI Window div (see jsbin fiddle)
The problem is that the scrollbar is not being shown ONLY for the top div, but for 'buttons pane' as well. In the given jsbin resize down the window vertically, so the scrollbar appears:
http://jsbin.com/UrasoKi/3/edit
<style scoped>
#top{
min-height: 500px;
width: 100%;
background-color: blue
}
#bottom{
height: 50px;
width: 100%;
background-color: green;
position: absolute;
bottom: 0px;
/*kendo specific margin indentation, ignore*/
margin: 0 0 0 -9px;
}
</style>
<div id="w">
<div id="top">TOP PANE</div>
<div id="bottom">BOTTOM PANE</div>
</div>
I would like to achieve clear bottom div positioning with css. Scrollbar should appear for TOP panel ONLY.
Elements MUST BE positioned INSIDE <div id='w'/> in fiddle (because of telerik kendo window resize handles) AND BE RESIZABLE, so any extra volume would be given to the top pane. But extra divs could be added into it (into div id="w")
I've been trying to play around for hours, something is missing.
I would tweak as follows to provide the sort of functionality you want:
<body>
<style scoped>
#top{
height: 100%;
width: 100%;
}
#bottom{
height: 50px;
width: 100%;
background-color: green;
position: absolute;
bottom: 0px;
/*kendo specific margin indentation, ignore*/
margin: 0 0 0 -9px;
}
#inner {
overflow-y:scroll;
height: 100%;
background-color: blue
}
</style>
<div id="w">
<div id="top"><div id="inner">TOP PANE</div></div> <div id="bottom">BOTTOM PANE</div>
</div>
<script>
$(document).ready(function() {
$('#w').kendoWindow({
width: '450px'
});
$('.k-window-content').css({'overflow':'hidden', scrollable: false })
});
</script>
</body>
The tweaks include fixing the size of the Kendo Window and adding an inner div with fixed height and overflow-y scrolling for the top panel.
I hope this helps...
The attribute min-height: 500px; is causing the window to show a scrollbar. You would want to put the two divs in another div with a fixed min-height and then give the two divs a fixed min-height
Edit:
Edited your fiddle, see if that is what you need.
http://jsbin.com/efOgoVE/10/edit