I need help keeping my footer stuck to the bottom, but not overlap the upper elements either. I'm still fairly new/rusty to this since it took me 2 years to find a web job after college, so I haven't kept up as much as I should have.
Anyways,
This is the format of the html I have. I want the "footer" to be stuck at the bottom so when they scroll up from the bottom it stays. But I also don't want it to be pushed up too high to make white space below it.
I've been trying to use a "position: absolute" style for the footer to keep it on the bottom. But I just read somewhere this bumps it out of the regular flow and that's what causes overlapping.
So how can I reformat my styles to allow the footer to stay below, but not overlap?
HTML:
<html>
<header></header>
<body>
<div class="content">
<div class="hd">Content of header</div>
<div class="bd">Content of body</div>
<div class="ft">Content of footer</div>
</div>
</body>
</html>
CSS: (basic parts)
div {
display: block;
}
*, *:before, *:after {
box-sizing: inherit;
}
.hd {
position: static;
flex: 0 0 auto;
}
.bd {
position: relative;
flex: 1 0 auto;
}
.ft {
position: absolute;
bottom: 0px;
flex: 0 0 auto;
}
Just add a margin to the bottom of your body equal to your footer's height.
So if your footer has a height of say, 100px, then you need to add this to your css:
body {
margin-bottom: 100px;
}
I followed the instructions from the link that sweaver2112 suggested, and I had to remove a few duplicate elements and change others, and I finally got the footer to not overlap. Had to use flex to get it to work with the other div elements
.content {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.ft {
flex: 0 0 50px;
margin-top: auto;
}
Thank you all for the support!
Link for answer purposed that I used: LINK
I think you might be looking for position: fixed;
Ex:
.footer {
position: fixed;
bottom: 0;
}
This sticks the footer at the bottom of the window regardless of the content so when you scroll the footer will always stay at the bottom. This will however be above the content (overlap), so you need to also apply AndrewL's option to keep the content from going under the footer.
Related
I can't find a way to do this
There seems to be padding placed above and below the element, although I have set it zero
https://plnkr.co/edit/WvEqNCxEcLY5yS1IT738?p=preview
<div>
<button>hello</button>
</div>
<table><tr><td>
<button>hiya</button>
</td></tr></table>
td,
div{
padding: 0;
height: 10em;
border: solid;
}
button {
height: 100%;
width:100%;
border:solid 10px #f00;
}
I don't want to use absolute position as the contents vary, and JS would be an overhead I couldn't live with!
Is there a known bug here? Would anyone have a link to it so I can watch it not get fixed for years and drives me to a stress related end
Thanks in advance
ios pic
chrome on win 10 (desired result)
Thebutton, input, textarea, img, video, audio etc. are REPLACED ELEMENTS. The positioning rules for them are other than for standard elements. You can try to enclose replaced elements into a span or div.
Add <div/> inside <td/> and put <button/> into <div/> it will work properly. Add styles to new <div/> element and use:
button
{
height: 100%;
width:100%;
padding:0;
margin:0;
}
<table><tr><td><div class="replaced-element-container"><button>hiya</button></div></td></tr></table>
Well, this is embarrassing but it meets W3C requirements.
For one table cell in the row:
td, div
{
padding: 0;
height: 10em;
border: solid;
display:block;
}
button
{
height: 100%;
width:100%;
border:solid 10px #f00;
}
But it doesn't resolve problem that button is replaced element. It is still in container made from <td/> element.
I have one div containing an image and a translucent window over it that is draggable and resizable. I am using the parent div as the containment parameter for the respective jQuery UI interactions. But when I resize the window, I can only resize it to 10px less than the parent width. No matter which image I use. No issues resizing to the full height. No issues dragging to the far right or bottom.
Here is the code (Try it here - JS Fiddle)
HTML:
<div id="container">
<div id="navi">
<img src="http://www.mountainevolution.com/Cento%20Fonti/images/dscn7587.jpg" />
</div>
<div id="infoi">
</div>
</div>
CSS:
#container {
width: 100px;
height: 100px;
position: relative;
}
#infoi {
position: absolute;
top: 0px;
left: 0px;
background-color: lightblue;
border: solid 1px navy;
width: 100px;
height: 100px;
opacity: 0.5;
}
#navi {
padding: 0px;
position: absolute;
}
#navi img {
display: block;
}
JS:
$("#infoi").draggable({
containment: "#navi"
});
$("#infoi").resizable({
containment: "#navi"
});
I have played around with margins and padding, and also looked at other questions on StackOverflow. None of them are similar to mine. There are some questions on problems with using resizable and draggable together. In my case, removing draggable does not affect the issue, so I don't think it is a problem with using them together.
I am creating a widget page using asp.net 4.0 and bootstrap which is going to be accessed across a variety of different screens so I need to have the main content responsive to grow/shrink based on the size of the screen.
My current code is similar to this -
<div class="container-fluid">
<div class="row header">
HEADER ROW
</div><!--/.row-->
<div class="row">
MAIN CONTENT
</div
<footer>
FOOTER GOES HERE
</footer>
</div><!--/.container-fluid-->
So the header and the footer will be 100px or 10% each and I want the main content to expand the height in between the header and footer.
How can I do this without specifying a height in pixels?
Thanks
You can use flex box for this.
div.wrapper {
background:green;
display: flex;
flex-flow: column;
height: 100%;
}
.header {
border-bottom:1px solid black;
flex: 0 1 100px;
}
div.main {
flex: 1 1 auto;
}
footer {
border-top:1px solid black;
flex: 0 1 100px;
}
Example:
https://jsfiddle.net/tqaar3zr/2/
I'm trying to put a div inside another div that stretches to the full height of the screen and center it vertically, like so:
Preview http://f.cl.ly/items/1a3L46453f0D271V1O2w/Schermafbeelding%202013-04-02%20om%2021.37.25.png
The large photo is the full screen div, the white band is the vertically centered div.
The solution below works gracefully on all possible computers and browsers that I tried... except for Mobile Safari.
For some reason, Mobile Safari (at least on iPad) decides to put the nested div 50% down the page instead of 50% down its parent div.
HTML:
<div class="band full">
<div class="band">
*content*
</div>
</div>
SCSS (irrelevant tags removed):
div.band{ //General styling for div.band elements
margin: 0px;
padding: 80px 0px;
width: 100%;
&.full{ //Style the parent div
height: 100%;
}
div.band{ //Style the nested div
position: relative;
top: 50%;
margin-top: -200px;
padding: 20px 0px;
height: 400px;
}
}
I've got a nagging feeling that this is a bug in Mobile Safari. I sure hope it isn't. Does anyone know how to fix this?
I really did my best to solve this in a clean manner, but I ran some more tests and it's clearly a bug in Mobile Safari's rendering engine. I decided to solve it with an admittedly dirty jQuery hack, but at least it works now.
My page had one of these full screen photos with a band in the middle on the very top, and another one on the very bottom of the page. The top one was easy to solve: just use absolute positioning instead of relative (which was positioning relatively to the top of the page anyway). The "top" property of the bottom band, on the other hand, has to be recalculated based on the height of the page after setting its positioning to absolute. I solved this by setting the "top" property to this: vertical offset from the top of the page to the bottom band + (the height of the full screen band to center in / 2).
Or in code form:
$(window).load(function() { //Wait until the page is fully loaded
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { //If the user is using an iDevice
$('div.band#top div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('top', $('div.band#bottom').offset().top + ($('div.band#bottom').height() / 2));
}
});
check this out. Not tested on mobile but should work
HTML
<div class="panel">
<div class="panelInner">
<div class="box">
<div class="boxInner">hi there</div>
</div>
</div>
</div>
CSS
html {
min-height: 100%;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.panelInner {
padding: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box {
height: 200px;
background: #999;
display: table;
width: 100%;
}
.boxInner {
display: table-cell;
vertical-align: middle;
}
And here's a fiddle
I have a scrollable div with the following css:
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
width:200px;
height:500px;
However on iOS devices, when the content inside of the div is wider than the div itself, x-axis scrolling is enabled. How do I disable x-axis scrolling?
I've been having the same problem and it seems that there are no x/y options for -webkit-overflow-scrolling unfortunately. The workaround I typically use is to wrap the scrolling div in an overflow-x: hidden div and problem should be solved.
Markup:
<div class="scroll-container">
<div class="scroll-wrapper">
<div class="scroll-body">
</div>
</div>
</div>
Styling:
.scroll-container {
-webkit-overflow-scrolling: touch;
overflow: auto;
width: 200px;
width: 500px;
}
.scroll-wrapper {
width: 200px;
overflow-x: hidden;
}
A really easy fix for this is just to make sure none of your elements are wider than the viewport. This can be accomplish by placing a "catchall" at the top of your CSS:
div, span, h1, h2, h3, h4, h5, p, img, ul, li, ... ETC ...
{
max-width: 100%;
}