I'm having a problem with two wrappers that I am using. I want to make the #wrapper always extend to the bottom of the screen. This is now working by using min-height: 100%;. Within this div I'm using another wrapper, #page-wrapper, which should be extended to the bottom of the #wrapper div. To make this work, the #wrapper div has to be set to height: 100% instead of min-height. Is there a way to achieve both?
#wrapper {
width: 100%;
background-color: #2f4050;
min-height: 100%;
position: relative;
}
#page-wrapper {
padding: 0 15px;
min-height: 100%;
background-color: white;
height: 100%;
}
<div id="wrapper">
<div id="page-wrapper"></div>
</div>
Try using viewport units.
#page-wrapper {
min-height: 100vh;
}
Example 1:
body {
margin: 0;
}
#wrapper {
background: pink;
}
#page-wrapper {
min-height: 100vh;
background: gold;
}
<div id="wrapper">
<div id="page-wrapper">
</div>
</div>
Example 2:
body {
margin: 0;
}
#wrapper {
background: pink;
}
#page-wrapper {
min-height: 100vh;
background: gold;
}
<div id="wrapper">
<div id="page-wrapper">
<div style="height:200vh;"></div>
</div>
</div>
Related
I am trying to have a header/footer and a scrollable div#middle. Within the scrollable div, another (inner) footer div#middle-bottom should be placed at the bottom of div#used-for-swipe-animation and always be visible.
This is my current code using flex-container (using flex is not a requirement):
html, body {
margin: 0
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
overflow-y: auto;
}
.top {
background: lightgreen;
}
.middle {
flex-grow: 1;
overflow: auto;
}
.middle-bottom {
background: red;
}
.bottom {
background: lightblue;
}
<body>
<div class="wrapper">
<div class="top">top</div>
<div id="used-for-swipe-animation">
<div class="middle">
middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle
</div>
<div class="middle-bottom">
middle-bottom<br>middle-bottom<br>middle-bottom<br>middle-bottom<br>
</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
Problem: Without the div#used-for-swipe-animation it works as expected. However, as the id suggests, div#used-for-swipe-animation is needed to perform some animation.
Nice-to-Have: Is it possible to have the scrollbar of div#middle to be displayed over full height of div#wrapper?
As per I understand your Que, you need fixed Header & Footer and scroll div in middle
html,
body {
margin: 0
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
overflow-y: auto;
}
.top {
position: fixed;
top: 0;
width: 100%;
height: 30px;
background: lightgreen;
}
.main_center {
margin: 30px 0;
}
.middle {
flex-grow: 1;
overflow: auto;
}
.middle-bottom {
background: red;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
background: lightblue;
}
<body>
<div class="wrapper">
<div class="top">top</div>
<div id="used-for-swipe-animation" class="main_center">
<div class="middle">
middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle
</div>
<div class="middle-bottom">
middle-bottom<br>middle-bottom<br>middle-bottom<br>middle-bottom<br>
</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
Replay can lead perfection :)
Is it possible to make a div with a height of 100%, and have the inner item that overflows scroll.
It sounds like a simple problem (and it might be), but I have been thinking about it for days. Some things that don't work in my specific case are:
height: calc(100% - xx px), because the header is of a variable height.
Putting all high children as direct children in the wrapper component (I use a component that has some layers
<div class="wrapper">
<div class="header">
A header
</div>
<div class="container">
A container
<div class="with-many">
Don't scroll
<div class="divs">
Scroll
</div>
</div>
</div>
</div>
.wrapper {
width: 80vw;
height: 80vh;
background-color: lightgrey;
* {
width: 100%;
}
.header {
height: 30px;
background-color: orange;
}
.container {
height: 100%;
background-color: lightgreen;
.with-many {
height: 100%;
overflow-y: auto;
background-color: green;
.divs {
height: 400vh;
background-color: blue;
}
}
}
}
https://jsfiddle.net/zdb8pmuL/1/
Do you mean like this?:
.wrapper {
width: 80vw;
height: 80vh;
background-color: lightgrey;
}
.wrapper * {
width: 100%;
}
.header {
height: 30px;
background-color: orange;
}
.container {
height: 100%;
background-color: lightgreen;
display: flex;
flex-direction: column;
}
.with {
height: 100%;
background-color: green;
}
.another-wrapper {
overflow-y: scroll;
height: 100%;
}
.divs {
height: 400vh;
background-color: blue;
}
<div class="wrapper">
<div class="header">
A header
</div>
<div class="container">
A container
<div class="with">
With many
<div class="another-wrapper">
<div class="divs">
nested divs
</div>
</div>
</div>
</div>
</div>
I've got sections that slide up over the header.
But I need the last section to reveal the footer.
It is possible to reveal the footer without JavaScript in a situation like this?
html,
body,
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
height: 100%;
margin-top: 300px;
margin-bottom: 300px;
}
.header {
height: 100vh;
background: tomato;
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
.section1,
.section2,
.section3 {
height: 100vh;
z-index: 10;
position: relative;
}
.section1 {
background: orange;
}
.section2 {
background: purple;
}
.section3 {
background: red;
}
.footer {
height: 10vh;
position: fixed;
bottom: 0;
width: 100%;
background: aquamarine;
}
<div class="container">
<div class="header">
header
</div>
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
</div>
<div class="footer">
footer
</div>
View on JS Bin
The reason your footer isn't showing up is because it has a lower z-index than the other sections. However, if you give your .footer class a higher z-index than the other sections, it will always show at the bottom because it has the style position: fixed.
One possible solution would be to give the footer the same z-index as the other sections, change its position to relative, and include it inside your .container class.
This would look like:
html,
body,
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
height: 100%;
margin-top: 300px;
margin-bottom: 300px;
}
.header {
height: 100vh;
background: tomato;
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
.section1,
.section2,
.section3,
.footer {
height: 100vh;
z-index: 10;
position: relative;
}
.section1 {
background: orange;
}
.section2 {
background: purple;
}
.section3 {
background: red;
}
.footer {
height: 10vh;
position: relative;
bottom: 0;
width: 100%;
background: aquamarine;
}
<div class="container">
<div class="header">
header
</div>
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
<div class="footer">
footer
</div>
</div>
JS Bin
Try putting :
z-index: 11;
Because you have z-index in the other container that's why you can't see the footer
You might consider using position:sticky.
A stickily positioned element is an element whose computed position
value is sticky. It's treated as relatively positioned until its
containing block crosses a specified threshold (such as setting top to
value other than auto) within its flow root (or the container it
scrolls within), at which point it is treated as "stuck" until meeting
the opposite edge of its containing block.
However, consider the browser compatibility.
At the time of this post, IE doesn't support "sticky" positioning.
Here's a demonstration:
body {
margin: 0;
}
.header {
position:-webkit-sticky;
position: sticky;
background: tomato;
height: 100vh;
top: 0;
}
.section1,
.section2,
.section3 {
height: 100vh;
position: relative;
}
.section1 {
background: orange;
}
.section2 {
background: purple;
}
.section3 {
background: red;
}
.footer {
position:relative;
height: 10vh;
background: aquamarine;
}
<div class="header">
header
</div>
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
<div class="footer">
footer
</div>
My goal was to get the footer to stay at the bottom of the page and to go further down when more content is added. In doing so, a div element on my page which follows the footer has stopped half way when there isn't enough content.
My question is, how do you get the middle-stripdiv to stretch to the footer and have the goal above still achievable.
Here is a simplified JSFiddle to show the issue.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #283343;
height: 50px;
}
#middle-strip {
padding-bottom: 100px;
background: #32cd32;
width: 500px;
margin: auto;
}
#content-area {
width: 400px;
height: 100%;
margin: auto;
}
#footer {
background: #283343;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
<div id="container">
<div id="header">
THIS IS THE HEADER
</div>
<div id="middle-strip">
<div id="content-area">
THIS IS WHERE THE CONTENT WILL GO
</div>
</div>
<div id="footer">
THIS IS THE FOOTER
</div>
</div>
You can use flexbox to achieve this:
#container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#middle-strip {
flex: 1;
}
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
I want the footer be pushed down and appear as last element of the page. However as the content wrapper before has a height of 100%. The content's height exceeds the height of the browser height. In the end the footer appears after the browserheight and not after the content wrapper. How can I change it and still have a 100% height of the wrapper, that is needed for the background design.
codepen
HTML
<div class="content_wrap">
content wrap
<div class="item">content</div>
</div>
<footer>footer</footer>
CSS
body, html{
height: 100%;
}
.content_wrap{
height: 100%;
width: 100%;
border: 2px solid black;
}
.item{
height: 1300px;
width: 100%;
background: red;
}
footer{
height: 100px;
width: 100%;
background: yellow;
}
Give the body position property value of relative and position property value of absolute & bottom value of -(footer Height) for the footer
body {
height: 100%;
position: relative;
}
.content_wrap {
height: 100%;
width: 100%;
border: 2px solid black;
}
.item {
height: 1300px;
width: 100%;
background: red;
}
footer {
height: 100px;
width: 100%;
background: yellow;
position: absolute;
bottom:-100px; /* minus the height of the Footer and it wont overlap any other element */
}
<div class="content_wrap">
content wrap
<div class="item">content</div>
</div>
<footer>footer</footer>
footer{ position: fixed
bottom: 0px;
}
possible duplicate of: Bottom footer
If you use min-height: 100% instead of height: 100% on the content_wrap it will be at least 100% of the screen in height and it will grow if the content inside it is larger.
body, html{
height: 100%;
}
.content_wrap{
min-height: 100%;
width: 100%;
border: 2px solid black;
}
.item{
height: 1300px;
width: 100%;
background: red;
}
footer{
height: 100px;
width: 100%;
background: yellow;
}
<div class="content_wrap">
content wrap
<div class="item">content</div>
</div>
<footer>footer</footer>
body{
display:flex;
flex-flow:column;
height:100%;
}
header{
flex:0 0 75px;
}
.middle-container{
display:flex;
flex: 1 0 auto;
}
footer{
flex: 0 0 25px;
}
<header>Header</header>
<div class="middle-container">
content wrap
<div class="item">content</div>
</div>
<footer>footer</footer>