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/
Related
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>
I'm building my first website, and I am having some issues figuring out how to combine a wrapper that limits the max-width of the content and using flexbox on a section.
A typical section of my website would look like:
<section class="hero flex">
<div class="wrapper">
<h1>Content 1</h1>
<p>Content 2</p>
<button>Content 3</button>
</div>
</section>
I am running into the following problems:
When adding the wrapper div between section & the content, the content is no longer direct children of section, and thus are not affected by the flexbox. Therefore I cannot center the content.
If I put the classes .hero and .wrapper on the section tag, the background color is affected by the width/max-width of wrapper
I'm sure that I'm running into more problems that I still haven't found yet. I am therefore interested in how to use a wrapper for limited max-width together with flexbox sections.
.hero{
max-width: 700px;
}
.wrapper{
width: 100%;
display: flex;
justify-content: space-between;
}
<section ="hero flex">
<div class="wrapper">
<h1>Content 1</h1>
<p>Content 2</p>
<button>Content 3</button>
</div>
</section>
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!
Isn't the first time I want all content inside all sections are in a container with a max-width, but the only solution is duplicate html tags. Something like this:
<body>
<section class="one">
<div class="wrapper">
// content for one
</div>
</section>
<section class="two">
// There is a background here
<div class="wrapper">
// content for two
</div>
</section>
<section class="three">
<div class="wrapper">
// content for three
</div>
</section>
<section class="four">
// There is a background here
<div class="wrapper">
// content for four
</div>
</section>
</body>
Putting a div "wrapper" inside looks like the only solution to control every section with a max-width/centered and keeps the ability to put a full-width backgound in few section.
I don't like this solution, is a div duplicated for every section with same properties. If someday I change my mind and want remove it or I need to do it in every section or I need to remove css to that selector. Its look not semantical for me.
Any solution?
I would create a div like this
<div id="maindiv">
<div id="sitecontainer">
<!-- inner content -->
</div>
</div>
Then you can control max width from one place for all section. IF you don't want max width for a section, remove the site container div from within that section. You change your mind on the width? Change it in one place. You decide to go 100% width, change the width to 100% inside that div. Makes it easy to manage sitewide..
Your css
#sitecontainer { float: left; width: 1000px; margin: 0 auto; }
#maindiv { float: left; width: 100%; }
Then if you add another div,
<div id="secondarydiv">
<div id="sitecontainer">
// content still 1000px centered
</div>
</div>
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;
}