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>
Related
I'm really struggling to create css layout like this:
Top row: fixed size: Ex: 50px;
Content: the biggest square the current width can fit. So width = height for this one. It should respect the bottom row min-height.
Bottom row: take all remaining space available, and with min-height. Ex: 50px.
No scrollbar. The idea is to use the current screen the best way possible for any resolution. No javascript unless it's only possible with js.
Any ideas?
That's the best I've got so far:
<div class="shell">
<div class="header"></div>
<div class="square"></div>
<div class="footer"></div>
</div>
css
body {
margin: 0px;
}
.shell {
background-color: #000000;
height: 100vh;
max-width: calc(100vh - 100px);
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.header {
background-color: #0000ff;
height: 50px;
}
.square {
width: 100%;
background-color: #dc143c;
}
.footer {
background-color: #00008b;
height: 100vh;
}
You can use padding to get the aspect ratio:
body {
margin: 0px;
}
.shell {
background-color: #000000;
height: 100vh;
max-width: calc(100vh - 100px);
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.header {
background-color: blue;
height: 50px;
}
.square {
width: 100%;
padding-top: 100%;
background-color: green;
}
.footer {
background-color: red;
height: 100%;
}
<div class="shell">
<div class="header"></div>
<div class="square"></div>
<div class="footer"></div>
</div>
Reference here
I think your question was already solved here:
Make a div fill the height of the remaining screen space
Mixed with your try:
body {
margin: 0;
}
.box {
display: flex;
flex-flow: column;
background-color: #000000;
height: 100vh;
max-width: calc(100vh - 100px);
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.box .row.header {
flex: 0 1 50px;
background-color: #0000ff;
}
.box .row.content {
flex: 1 1 auto;
width: 100%;
background-color: #dc143c;
}
.box .row.footer {
flex: 0 1 40px;
background-color: #00008b;
}
<div class="box">
<div class="row header">
</div>
<div class="row content">
</div>
<div class="row footer">
</div>
</div>
Fiddle: https://jsfiddle.net/901s2kdL/
Content: the biggest square the current width can fit. So width =
height for this one. It should respect the bottom row min-height.
If you want the biggest square, the footer height will be fixed and it will be equal to min-height always (and it should be), so it doesn't matter if you will set it's height to 100% or 50px. max-width of square determining really sizes. If you look at this max-width: calc(100vh - 100px), the - 100px part is the real remaining space including header and footer, so if the header height is set to 50px, the footer height is also 50px.
body {
margin: 0px;
}
.shell {
background-color: black;
}
.header {
height: 50px;
background-color: red;
}
.square {
max-width: calc(100vh - 100px);
margin: 0 auto;
background-color: green;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.footer {
height: 50px;
background-color: blue;
}
<div class="shell">
<div class="header"></div>
<div class="square"></div>
<div class="footer"></div>
</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'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>
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 7 years ago.
What I have is a simple structure of container followed by two child elements, contentand footer.
footer has a fixed height and content should fill remaining empty space. That is easy enough to achieve with display:table; but for some reason I can't figure out how to make content element overflow to work if its contents exceed website window height?
Here is a JSFiddle, if you set content_child height to say 10pxyou can see content element filling up the space nicely but when content_child is a lot bigger content element shouldn't expand the way it does now, what am i missing here?
I would prefer to not use JavaScript to solve this if possible.
body, html{
height: 100%;
padding: 0px;
margin: 0px;
}
.container{
display:table;
background; black;
width: 100%;
background: black;
height: 100%;
}
.top{
background: blue;
display:table-row;
height: 100%;
}
.bottom{
background: red;
height: 60px;
}
.content{
height: 100%;
overflow: hidden;
padding: 5px;
}
.content_child{
height: 1000px;
background: grey;
}
<div class="container">
<div class="top">
<div class="content">
<div class="content_child"></div>
</div>
</div>
</div>
<div class="bottom">
</div>
</div>
Flexbox can do that.
body {
margin:0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
background: #bada55;
overflow-y: auto;
}
.expander {
height: 1000px;
/* for demo purposes */
}
footer {
background: red;
height: 60px;
}
<div class="container">
<div class="content">
<div class="expander"></div>
</div>
<footer></footer>
</div>
The only thing you need to do is to change this CSS rule
.content{
height: 100%;
overflow: auto; /* change from hidden to auto */
padding: 5px;
}
which will make it look/work like this
body, html{
height: 100%;
padding: 0px;
margin: 0px;
}
.container{
display:table;
background; black;
width: 100%;
background: black;
height: 100%;
}
.top{
background: blue;
display:table-row;
height: 100%;
}
.bottom{
background: red;
height: 60px;
}
.content{
height: 100%;
overflow: auto;
padding: 5px;
}
.content_child{
height: 1000px;
background: grey;
}
<div class="container">
<div class="top">
<div class="content">
<div class="content_child"></div>
</div>
</div>
<div class="bottom">
</div>
</div>
No need for tables, really. Depending on what you are trying to achieve, this may work for you:
body {
padding: 0;
margin: 0;
}
.content {
position: fixed;
top: 0;
bottom: 50px;
width: 100%;
background: blue;
color: #fff;
overflow-y: auto;
}
.footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background: red;
}
<div class="content">
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
</div>
<div class="footer"></div>
And if there's no fancier purpose, you could always just change the body background, the same end result here with less code. The only difference is that the scroll bar shows above the footer as well in this one.
body {
padding: 0;
margin: 0;
background: blue;
color: #fff;
}
.footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background: red;
}
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<div class="footer"></div>
I hope this will help if you set height as auto
body, html{
padding: 0px;
margin: 0px;
}
.container{
display:table;
background; black;
width: 100%;
background: black;
height: auto;
}
.top{
background: blue;
display:table-row;
height: auto;
}
.bottom{
background: red;
height: 60px;
}
.content{
height: auto;
overflow: hidden;
padding: 5px;
}
.content_child{
height: auto;
background: grey;
}
Maybe use calc() for height of .top instead of using display: table
.top{
background: blue;
height: calc(100% - 70px);
padding: 5px;
}
.content{
height: 100%;
overflow-y: scroll;
}
Check out this working fiddle: https://jsfiddle.net/xyxj02ge/4/
I need to place the content one below the other from the top and center align it.
I tried making all the rows positioning them absolute and making the
top:20% ,top:40% ,top:60% respectively and margin: 0 auto does not work.So I had to put left percentages for all three rows.
It looks rubbish when I reduce width of browser and when I reduce the height of the browser the divs overlap each other
I do not want overflow:auto or overflow-y:scroll .I want the content to be placed in that 100% height of wrapper and centered perfectly.How to implement this and also suggest me how to do it in media queries ?
HTML
<div id="wrapper">
<div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>
CSS
html,body{
height: 100%;
width: 100%;
}
#wrapper{
height: 100%;
width: 100%;
}
#row1{
height: 200px;
width: 600px;
}
#row2{
height: 400px;
width: 800px;
}
#row3{
height: 200px;
width: 500px;
}
Please do like this
html,body{
height: 100%;
width: 100%;
}
body{background: #333;}
#wrapper{
height: 100%;
width: 100%;
display: table;
}
.w1{
display: table-cell;
vertical-align: middle;
}
#row1{
height: 50px;
width: 600px;
background: #fff;
margin: 0 auto;
}
#row2{
height: 100px;
width: 800px;
background: #fff;
margin: 10px auto;
}
#row3{
height: 50px;
width: 500px;
background: #fff;
margin: 0 auto;
}
<div id="wrapper">
<div class="w1">
<div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>
</div>
It looks rubbish when I reduce width of browser and when I reduce the
height of the browser the divs overlap each other
Use percent units (or vw) instead of pixels.
I want the content to be placed in that 100% height of wrapper and
centered perfectly
Use flex on the container, with appropriate width and heights on the children.
Example Snippet:
html, body {
box-sizing: border-box;
margin: 0; padding: 0;
height: 100%; width: 100%;
}
#wrapper {
height: 100%; width: 100%;
display: flex; flex-direction: column;
align-items: center; text-align: center;
justify-content: space-around; /* to distribute space evenly around */
}
#wrapper > div { background-color: #ddd; }
#row1 { flex: 0 0 20%; width: 50%; } /* 0 0 means cannot grow cannot shrink */
#row2 { flex: 0 0 10%; width: 80%; }
#row3 { flex: 0 0 40%; width: 65%; }
<div id="wrapper">
<div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>
Sample Fiddle: http://jsfiddle.net/j3js87fc/1/
Update:
Alternatively, you could just use appropriate top/bottom margins on the row2 to have differing gaps between rows.
Example 2:
html, body {
box-sizing: border-box;
margin: 0; padding: 0;
height: 100%; width: 100%;
}
#wrapper { height: 100%; width: 100%; }
#wrapper > div { background-color: #ddd; }
#row1 { height: 20%; width: 50%; margin: auto; }
#row2 { height: 10%; width: 80%; margin: 3% auto 7% auto; }
#row3 { height: 40%; width: 65%; margin: auto; }
<div id="wrapper">
<div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>
Sample fiddle: http://jsfiddle.net/j3js87fc/4/
.
Here you go:
http://jsfiddle.net/oh36f1zb/4/
The left:50%; transform: translateX(-50%); does all the trick.