This question already has answers here:
Problem with CSS Sticky Footer implementation
(5 answers)
Closed 8 years ago.
I know that there are tons of answer out there. I spent many many hours trying to figure out what it not working.
I want to have a sticky footer.
the html structure is like this
<body>
<div id=container>
<div id=header>
</div>
<div id=body>
<div id=left>
</div>
<div id=center>
</div>
<div id=right>
</div>
</div>
<div id=footer>
</div>
</div>
</body>
and a link with the css and the content link
Change your footer position from "absolute" to "fixed"
If you want to have the footer always be at the bottom of the screen/window you can add the following to your css
#footer {
position: fixed;
bottom: 0;
}
Related
This question already has answers here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 2 years ago.
I am trying to make a div element sticky on my page. When I use position sticky (and yes, it is inside of a parent element), not only is it not sticky, but I can't position it's top value. The left and right work, but not top or bottom. As the user scrolls down the page I want the div to be visible in it's entirety nearly all the way down. Can I achieve this in CSS? Here is some code:
<main class="main-area">
<header class="header">
<div class="header__logo-area">
<img src="/src/assets/svg/logo.svg" alt="ImmediaDent logo">
</div>
<div class="header__green-plus">
<img src="/src/assets/svg/plus large.svg" alt="Large Green Plus" class="header--green-plus">
</div>
</header>
</main>
<div class="form">
<div class="form__form-section">
This is where the text goes.
</div>
</div>
<section class="next">
</section>
.form {
position: relative;
&__form-section {
position: sticky;
background-color:$colorFormGray;
bottom: 10rem;
top: 10rem;
left:45rem;
height: 40.9375rem + 18.3125rem;
width: 38.5964912%;
border-radius: 20px;
text-align: center;
}
Please let me know if any more code or information is needed. Thank you!
This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Closed 5 years ago.
I'm struggling with making a sticky footer work in my vuejs application.
vuejs and other framework like it, require that a root element be present in the template.
But this is making it difficult to use Flex to add a sticky footer.
without the root element:
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
<p>
<button id="add">Add Content</button>
</p>
</div>
<footer class="footer">
Footer
</footer>
everything works for, but with the root element, it doesn't.
<div>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
<p>
<button id="add">Add Content</button>
</p>
</div>
<footer class="footer">
Footer
</footer>
</div>
Since removing the root element is not an option, please how can I update the css to work with the root element?
JsFiddle
You could set an id to the outer div (e.g id="app") and use the css-rules that you defined for body:
<div id="app">
...
</div>
html, body {
height: 100%;
}
#app {
display: flex;
flex-direction: column;
height: 100%;
}
https://jsfiddle.net/Low3fbs1/4/
This question already has answers here:
CSS - how to overflow from div to full width of screen
(3 answers)
Closed 7 years ago.
I need to put a background image in the middle of a page like this below.
A way would be to close the div container and put it back after my image. But I don't think that's the best way, so here I come to find some help.
My HTML :
<div class="container">
<div class="job">
<h4>Disc Jockey</h4>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<p>
Lorem ipsum...
</p>
</div>
</div>
</div>
</div>
And in my css :
.job{
margin-top: 75px;
background:url(../img/bg-about.jpg) no-repeat center top scroll;
background-size: 100% auto;
height: 357px;
width: 1920px;
}
Thanks in advance.
Try to add class .job to <div class='container job'></div> I think it must help you
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 7 years ago.
I have this setup on my page, this works fine if the head + content + foot fits the screen height. But when the content grows, it will grow under the foot, instead of pushing the foot to the bottom of the page.
How can I fix this?
<body>
<div class="head">
Head
</div>
<div class="container">
Content
</div>
<div class="foot">
Foot
</div>
</body>
You probably have CSS doing that. If you have this HTML without markup, that doesn't happen.
Most likely, you have a CSS that looks like this, which needs to be removed.
.foot {
position: fixed;
bottom: 0;
}
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 7 years ago.
I have this page:
http://invata.dac-proiect.ro/invat/index2.html
I want my div .container-home to be align vertically to the center.
CODE HTML:
<div class="container-home" style="width: 900px;height: 696px;background: url(DECUPATE/TEST/images/ppp.jpg);margin: 0 auto;background-size: contain;">
<div class="margine">
<div class="sus">
<div class="btn"></div>
<div class="btn2"></div>
</div>
<div class="jos">
<div class="btn3"></div>
<div class="btn4"></div>
</div>
</div>
</div>
How do I do this?
I found these examples but we did not implement them.
http://www.vanseodesign.com/css/vertical-centering/
Thanks in advance!
EDIT:
I add:
body{display table;}
.container-home{display:table-cell;vertical-align;middle;}
but not working.
You need to use some savvy positioning in your CSS. Add the following to your container-home class in the CSS:
.container-home {
/* existing code */
position:relative;
top:50%;
transform:translateY(-50%);
}
The entire body of the page should be vertically and horizontally centered now.