This question already has answers here:
CSS Single-column layout centered fixed-width 100% height w header and footer
(5 answers)
Closed 7 months ago.
Feels like should already know how to achieve this effect, but I don't, so here goes:
I want footer to be placed at the bottom of the page if there is not enough content and if the page is filled I want it to be after all the content. So when you scroll it's not sticky.
Could you please help with this?
This can be achieved easily using Flexbox and setting min-height: 100vh to the main container.
I would suggest having a look at the Flexbox documentation (from MDN).
<body>
<div style="min-height: 100vh; display: flex; flex-direction: column;">
<header>
Header
</header>
<main style="flex: 1 0 auto; background: red;">
Some content.
</main>
<footer>
Footer
</footer>
</div>
</body>
Related
This question already has an answer here:
How to make a container that fill the remaining screen height and is scrollable?
(1 answer)
Closed 1 year ago.
I'm new to CSS and HTML and experimenting with Angular.
I would like to have a web page without a 'main' scroll bar (electron app).
Within this page I would have 3 divs.
One of them (the one in the middle), would contain a child with a big height. This is why this middle div would need to overflow with a scroll bar.
In other terms, I would like that middle div to be the adjusted height whenever I resize the height of the window. And it would fill all the available space.
I wonder if it is possible to do this with CSS? Or do I have to write javascript code to set the height of this middle component equal to the height of the parent minus the others elements?
<div>
<div>
I would like that the scroll zone expands down to the bottom of the browser
window. (this text should always be visible)
</div>
<div class="scroll-zone">
scroll-zone
<div class="big-box">big-box</div>
</div>
<div>After scroll zone (should always be visible)</div>
</div>
.scroll-zone {
height: auto; /*Do I really have to set a fixed size here ?*/
overflow: auto;
}
.big-box {
height: 1000px;
border-style: solid;
border-color: black;
}
(non working) example :
https://stackblitz.com/edit/angular-ivy-1szgga?file=src/app/app.component.html
<div>
<div>
I would like that the scroll zone expands down to the bottom of the browser
window. (this text should always be visible)
</div>
<div style="max-height: 400px;overflow: auto">
scroll-zone
<div style="background-color: yellow;height: 500px">big-box</div>
</div>
<div>After scroll zone (should always be visible)</div>
</div>
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:
How do nested vertical margin collapses work?
(3 answers)
Closed 5 years ago.
I am making the footer of my WP custom theme. I have footer div(inside which I place components). I also have a logo div(where my logo is). I need distance from 12px between the begening of the footer div till the logo div.
I am using this:
<div class="footer">
<div class="footerlogo">
<img id="pic" src="<?php bloginfo('template_url') ?>/img/footer_logo.png">
</div> .......
.footerlogo{ margin-top:30px;}
It doesnt show any differance. WHat is the proper way of doing that?
enter image description here
You could use padding on the footer div, for example:
.footer {
padding-top: 12px;
}
This would add space between both the .footer and .footerlogo div elements.
https://jsfiddle.net/ss7Lp2nd/
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;
}