Here is the JSFiddle: http://jsfiddle.net/W2UvH/1/
Very simple implementation of a sticky footer that should stick to the bottom of the screen when there is less content height than the height of the screen. But if the height of the content extends beyond the height of the screen, then the footer should follow along with it.
I don't understand why my footer is stopping half way up the screen.
HTML:
<div id="Canvas">
<div id="Container">
<div id="Wrapper">
</div>
</div>
</div>
<div id="SiteFooter">
<p>Copyright © All Rights Reserved.</p>
</div>
CSS:
body, html {
height: 100%;
}
#Canvas {
position: relative;
min-height: 100%;
}
#Container {
margin: auto;
background-color: #CCC;
max-width: 802px;
padding: 15px 0;
}
#Wrapper {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
width: 730px;
background-color: #999;
border: 1px solid #DEDEDE;
overflow: hidden;
height: 1000px;
}
#SiteFooter {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
z-index: 9000;
background-color: #FF00FF;
height: 45px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #E0E0E0;
}
I see that all your other elements are positions relative. So, not sure what your exact implementation is, but:
#SiteFooter {
position: relative;
}
The above code should also do it for you.
You want the position to be fixed, not absolute.
#SiteFooter {
position: fixed;
}
Related
in situations where the content is small and body height: 100%, the footer is pressed to the bottom of the window, a pop-up absolute very long menu (longer then body height) increases the height of the document, resulting in a lot of free space after the footer. The problem is that the body height is at this point less than the document height.
How, using css, to force the body height to follow the height of the document.
Example on jsfiddle
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
height: 100%;
}
.ab {
left: 2em;
top: 2em;
right: 10em;
height: 150vw;
position: absolute;
border:1px solid yellow;
}
<div class="main">
<div class="ab"></div>
</div>
<style>
</style>
upd.
is looking for an css solution.
On JS (jQuery), it can be done some like this:
$("body").height($(document).height());
The issue is due to the .ab element having position: absolute;. This causes the element to be taken out of the document flow, resulting in the document height not changing.
Change the .ab to position: relative to fix this, but this might require some other HTML/layout changes.
function addElement() {
document.getElementById("ab").classList.add("show")
}
html,
body {
height: 100%;
position: relative;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
min-height: 100%;
box-sizing: border-box;
}
#ab {
box-sizing: border-box;
width: 90vw;
margin: 30px 5vw;
height: 150vw;
position: relative;
border:1px solid yellow;
display: none;
}
#ab.show {
display: block;
}
<div class="main">
<div id="ab"></div>
<button onclick="addElement()">Add tall element</button>
</div>
<style>
</style>
you can try this this will increase the height of main div and remove scroll or else u can give overflow-y:scroll
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
height:100%;
overflow-y:scroll;
position:relative;
}
.ab {
left: 2em;
top: 2em;
right: 10em;
height: 150vw;
position: absolute;
border:1px solid yellow;
}
<div class="main">
<div class="ab"></div>
</div>
<style>
</style>
Is it possible to use calc() to center an element, which has a width defined with % ?
e.g.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
width: 100%;
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 30%;
background-color: white;
text-align: center;
}
.inside h1 {
position: absolute;
left: calc(50% - 15%);
left: -webkit-calc(50% - 15%);
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
This is the slider. It has a "string", which guides through the steps of the slider and the header is always in the middle of the screen. But for design purpose, the line starts a bit to the right and ends a bit to the left, which is given with a width of 80%.
The top is slider no.1 with the string, the second slider, which is synced is the area with the big white square.
Maybe now it is a bit more clear, why I tried what I tried.
Yes, if you create a variable in the css for example:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
--Example: 200px;
position: absolute;
left: 50px;
width: calc(100% - var(--Example)/2);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">Some text...</div>
</body>
</html>
If you can have fixed width just add margin: 0px auto. This will center the text horizontally.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 40%;
background-color: white;
text-align: center;
margin: 0px auto;
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
I am trying to design a landing page to link to 2 web apps. I am trying to make the design as visually attractive as possible. I think it would look good if the Divs containing the links were side-by-side at the centre of the screen, with their edges overflowing the left and right of the screen. I can then put a border-radius on them and some nice blocky colour:
Goal:
I have tried numerous options, including inline-block and overflow:hidden:
HTML
<div id="centre-pane">
<div class="app-btn">
<img src="icon.png">link text
</div>
<div class="app-btn">
<img src="icon2.png">link text
</div>
</div>
CSS
.app-btn
{
width:1000px;
height:320px;
display:inline-block;
border:10px solid black;
border-radius: 50px;
}
#centre-pane {
width:2000px;
margin:0 auto;
text-align:center;
overflow-x: hidden;
}
Is this possible? I have found several ways of getting them side-by-side (eg here) but nothing that also lets them overflow the screen.
Just using position absolute would do the trick.
I've added a wrapper but it may not be required.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html,
.wrapper {
height: 100%;
}
.wrapper {
position: relative;
}
.btn {
width: 45%;
height: 30%;
background: lightblue;
border: 2px solid blue;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.left {
left: 0;
border-radius: 0 25% 25% 0;
border-left: none;
}
.right {
right: 0;
border-radius: 25% 0 0 25%;
border-right: none;
}
<div class="wrapper">
<div class="btn left"></div>
<div class="btn right"></div>
</div>
You can achieve this with absolute positioning and negative margins (for the right item). You'll have to fix the size of the body though in order to achieve the effect. I've also added individual classes to the first and second item respectively (.app-btn-1 and .app-btn-2):
body {
width: 2000px;
overflow-x: hidden;
}
.app-btn {
width:1000px;
height:320px;
position: absolute;
border:10px solid black;
border-radius: 50px;
overflow-x: hidden;
}
.app-btn-1 {
left: -500px;
text-align: right;
}
.app-btn-2 {
left: 100%;
margin-left: -500px;
}
DEMO
NOTE: For my demo to look right in jsfiddle, I've quartered the sizes so you can see the effect in the small window
Here is the code you need:
.menu {
display: inline-block;
height: 200px;
width: 40%;
margin-top: calc(50% - 100px);
border: 2px solid red;
background-color: brown;
color: black;
text-decoration: none;
transition: all 0.5s;
}
#left {
float: left;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: -10px;
}
#right {
float: right;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-right: -10px;
}
.menu:hover {
background-color: gray;
border-color: brown;
color: red;
}
<div class="menu" id="left">Left</div>
<div class="menu" id="right">Right</div>
I made a
JS Fiddle for you.
I am trying to design a page with a header, a main div that stretches to 100% of the vertical landscape (minus header and footer) and a footer. Like this pic:
I can get the header and main div to work. Like this:
<div id="wrapper">
<div class="header_div">HEADER</div>
<div class="main_div">MAIN</div>
<div class="footer_div">FOOTER</div>
</div>
With this CSS:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.header_div{
height: 40px;
width: 100%;
background-color: #000000;
}
.main_div{
margin-bottom:40px;
margin-top:40px;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color: red;
}
.footer_div{
position: relative;
height: 40px;
width: 100%;
background-color: blue;
}
So the main div starts 40px off the top to account for the header and then stops 40px from the bottom to account for the footer. This works well but I cannot get the footer div to show below the main div. The way it is now with position: relative it's putting the footer on top of the main div. If I use position:absolute it puts it underneath the main div.
I am sure I am just doing this wrong because CSS is not my thing.
Any help on this would be great.
Thanks
Using CSS3 Flexbox:
/*QuickReset*/*{margin:0;box-sizing:border-box;}
body { /* body - or any parent wrapper */
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
Use the css calc() function.
With this method, you don't have to define the position of the elements
Here is a demo
html:
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
css:
html, body {
height: 100%
}
body {
color: #FFF;
padding: 0;
margin: 0;
}
header {
background-color: #000;
height: 100px;
}
main {
background-color: #AAA;
height: calc(100% - 150px);
}
footer {
background-color: #000;
height: 50px;
}
Here's a simple method. Try this jsfiddle: http://jsfiddle.net/PejHr/
HTML:
<div id="top"></div>
<div id="main">
<div id="inner"></div>
</div>
<div id="bottom"></div>
CSS:
#main {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
padding: 50px 0px
}
#inner {
width: 100%;
height: 100%;
background: #f0f;
}
#top, #bottom {
width: 100%;
height: 50px;
background: #333;
position: absolute;
top: 0px;
left: 0px;
}
#bottom {
bottom: 0px;
}
I am trying to figure out the correct way to make a div class inherit the parent div height so that when I do for example, padding-top: 100% , it puts the element at 100% of the parent div.
Here's my code:
CSS
#globalContainer{
margin: 0px auto;
width: 100%;
height: 100%;
}
#header-out{
width: 100%;
background-color: black;
}
#header{
width: 940px; /* Set to % when possible */
height: 240px; /* Set to % when possible */
margin: 0px auto;
background-color: white;
}
#header .title{
position: relative;
float: left;
padding-top: 100%;
}
HTML:
<body>
<div id="globalContainer">
<div id="header-out">
<div id="header">
<div class="title">Test</div>
</div>
</div>
</div>
</body>
At the moment, my Test appears at the very bottom of the page inside of the bottom of my header...
Thanks !
EDIT: I am now trying to add a logo next to my title, I used this code:
#header .title{
position: relative;
float: left;
top: 50%;
left: 2.5%;
width: 250px;
height: 100px;
border-style: solid;
border-width: 1px;
}
#header .logo{
position: relative;
float: left;
top: 50%;
width: 250px;
height: 100px;
border-style: solid;
border-width: 1px;
}
Problem is, it overlaps my title, starting where my title would end if I did not use the left: 2.5%
I tried to remove the float: left, it doesn't change anything...
Anyone can help on this ?