I have the following design
How can I make the orange div expand from head to bottom, and then scroll if the content is bigger, but at the same time keep the footer at the bottom of the page?
I tried postioning the div as position:absolute with a bottom:footers's height and overflow-y:scroll, but if I do that it overlaps with the head.
You can set the header and footer elements to be position: fixed to the top and bottom respectively. From there you just need to add padding-top and padding-bottom to the central content div so that the content within it won't overlap. Try this:
<header></header>
<div id="content"></div>
<footer></footer>
header {
height: 150px;
position: fixed;
top: 0;
width: 100%;
}
#content {
padding: 150px 0 100px;
}
footer {
height: 100px;
position: fixed;
bottom: 0;
width: 100%;
}
Example fiddle
I understand, that the header is supposed to scroll with the page unlike the footer, so the easiest solution is this: give the fotter position: fixed and bottom: 0 and to the div apply margin-bottom: X where X is the height of the footer.
You need something like this?
body {text-align:center}
.header {position:fixed; top:0; left:0; right:0; height:50px; background:orange; color:white;}
.content {box-sizing:border-box; min-height:200vh; padding-top:50px; padding:bottom:50px;}
.footer {position:fixed; bottom:0; left:0; right:0; height:50px; background:red; color:white;}
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
By setting box-sizing:border-box; and min-height:100vh;, you are setting the min-height to the window height regardless of padding or borders.
I think I know what you need.
#H,#B,#F{
widht: 100%;
color: black;
text-align: center;
}
#H{
background: Orange;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#B{
background: White;
position: absolute;
bottom: 100px;
top: 100px;
left: 0;
right: 0;
overflow-y: scroll;
}
#F{
background: gray;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div id="H">Header</div>
<div id="B">Body<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
<div id="F">Footer</div>
Related
I'm working on a Web Dev project for uni and I've got Header and Footer tags that are fixed to always appear. However, as a result, the text in the main body of the web page disappears under them. How would I go about preventing this?
CSS included for reference.
header{
top: 0;
left: 0;
right: 0;
position: fixed;
background-color: #d3d3d3;
width: 100%;
}
footer {
bottom: 0;
left: 0;
right: 0;
position: fixed;
background-color: #d3d3d3;
width: 100%;
}
Thanks all!
If you can give your header and footer a height, you can extend your body with padding. Because the content stays in place, there will be place for your header and footer.
Example:
body{
padding-top: 100px;
padding-bottom: 100px;
overflow-x: hidden;
}
header{
top: 0;
left: 0;
right: 0;
position: fixed;
background-color: #d3d3d3;
width: 100%;
height: 100px;
}
footer {
bottom: 0;
left: 0;
right: 0;
position: fixed;
background-color: #d3d3d3;
width: 100%;
height: 100px;
}
in footer and header css add :
z-index:999;
This may not be the best answer but I would have supplied a height to the header and footer. and then the body would be in between with an overflow auto. You can try my sample and see if it looks like what you were expecting. I added the color just to show sections.
CSS
<style>
header{
top: 0;
left: 0;
right: 0;
height:100px;
position: fixed;
color:white;
background-color:#0D47A1;
}
#content{
position:fixed;
top:100px;
bottom:100px;
left:0;
right:0;
background-color:#2196F3;
overflow:auto;
font-size:12em;
}
footer {
bottom: 0;
left: 0;
right: 0;
height: 100px;
position: fixed;
color:white;
background-color: #0D47A1;
}
</style>
HTML
<header>
<div> Header</div>
</header>
<div id="content">
<div>Stuff</div>
<div>Stuff</div>
<div>Stuff</div>
<div>Stuff</div>
<div>Stuff</div>
<div>Stuff</div>
<div>Stuff</div>
<div>Stuff</div>
</div>
<footer>
<div> Footer</div>
</footer>
I have readed alot and still didn't position my footer proper. I am trying to position my footer to stay at the bottom of the page and be visible only when I scroll to the bottom.
I have added the folowing classes to the page:
<div class="wrap">
<!-- Holds all the page content inside -->
<div class="spacer"></div>
</div>
<div class="footer">
.....
</div>
I have added the folowing css to the classes:
.wrap {
min-height: 100%;
margin-bottom: -100px;
padding:5%;
}
/* Set the fixed height of the footer here */
.footer {
position: relative;
background-color: #222;
z-index: 1;
}
.spacer, #footer {
height: 100px;
}
What am I doing wrong and preventing the footer to stay always at the bottom?
Position your footer as absolute and add bottom: 0 to your footer class.
.footer {
...
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
More elegant solution would be like this
html, body{
margin: 0;padding:0;
}
.fake-body{
height: 200px;
overflow: auto;
}
.wrap {
position:relative;
}
/* Set the fixed height of the footer here */
.footer {
position: absolute;
background-color: #222;
z-index: 1;
bottom:0;
left:0;
right:0;
color:white;
}
.spacer, #footer {
height: 300px;
}
<div class="fake-body">
<div class="wrap">
<div class="spacer">spacer</div>
<div class="footer">footer</div>
</div>
</div>
Add this to the footer class
position: relative;
bottom: 0;
margin: 20px 0 0 0;
width: 100%;
This will keep the footer to the bottom
<div class="footer">
Your content
</div>
I have three DIVs, one is the header at the top which should be fixed (should not scroll), width 100%, height 50px; another is a sidebar to the left which needs to be 100% of browser's height, fixed width of 200px and another DIV for the main content to the right which will be fluid in width, that is 100% of the remaining width (total minus 200px).
Content in the main content DIV should scroll vertical as content grows, but the sidebar to the left and header DIV should remain as it is. YouTube's home page is the perfect example what I want to achieve. I tried all position types and widths, but no success. HTML is like this:
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Edit:
Basic CSS code I am trying is:
#header {
position: fixed;
width: 100%;
height: 50px;
}
#sidebar {
position: fixed;
width: 220px;
height: 100%;
}
#main-content {
position: relative;
left: 220px;
width: 100%;
height: 300px; /*This could be anything, content should scroll vertical*/
}
Simple css code :
body {
padding: 0;
margin: 0;
}
#header {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background-color: red;
}
#sidebar {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
width: 200px;
background-color: green;
}
#parent {
margin-top: 50px;
margin-left: 200px;
background-color: blue;
}
Example :
http://jsfiddle.net/rp4ss12b/
Your top bar and side bar need to be position: fixed;. Then your main content need to have a margin-top (in order not to be hidden by the top bar) and a margin-left (in order not to be hidden by the side bar).
You could do it like this:
html, body {
height:100%;
margin:0;
}
#header {
width: 100%;
height: 50px;
background-color: red;
position: fixed;
z-index:999;
}
#parent {
width:100%;
height:100%;
}
#sidebar {
padding-top:50px; /* padding-top must be the same as header height */
width:200px;
height:100%;
background-color: blue;
box-sizing:border-box;
position: fixed;
z-index:99;
}
#main-content {
position: relative;
width: 100%;
padding-left:200px; /* padding-left must be the same as sidebar width */
height: 300px; /* This could be anything, content should scroll vertical */
background: green;
box-sizing:border-box;
padding-top: 50px; /* padding-top must be the same as header height */
}
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Check this snippet, You can do this by using pure css as shown below or you can use display:inline-block or float elements but you need to set the width of right div using javascript.
html,body{width:100%;height:100%;margin:0;padding:0;}
#header{position:fixed;height:50px;width:100%;background:#000;top:0;left:0;}
#parent{background:red;width:100%;height:100%;display:table;border-collapse:collapse;}
#parent div{display:table-cell;padding-top:50px;}
#sidebar{width:200px;background:#444;color:#fff;}
#main-content{background:#ccc;padding:0;margin:0;}
<div id="header"></div>
<div id="parent">
<div id="sidebar">sadds</div>
<div id="main-content">dshajkashljk</div>
</div>
I need the following to happen in my website:
The counter and logo (top, bottom) should always have the same height and stay on the top and bottom even though the screen height will decrease/increase. BUT the 2 other divs in between should get smaller/bigger when the window changes. I hope with this example its easier to understand:
The logo will disappear when the screen height is too low, right now. Here is the css:
The section is 80% width and aside 20%, but that doesnt really matter here...
#countdown{
padding: 0.5em 0.5em 0.5em 3em;
margin: 0.5em;}
#addProject{
margin: 0.5em;
padding: 0 1em;
height: 44%;
overflow-y: auto;}
#Nye{
margin: 0.5em;
padding: 0 1em;
overflow-y: auto;
height: 40%;
}
#logo{
margin: 1em;
height: 5em;
}
#Rémi offered a good start, but I would recommend using position: fixed.
This will anchor your elements to the browser window, regardless of the amount of your content.
e.g.:
.counter, .middle1, .middle2, .logo {
position: fixed;
width: 20%;
min-width: 200px;
right:0;
}
.counter {
background: yellow;
top:0;
height: 50px;
}
.middle1 {
overflow: scroll;
background: blue;
top:50px;
bottom: 50%;
}
.middle2 {
overflow: scroll;
background: green;
top: 50%;
bottom:50px;
}
.logo {
background: pink;
bottom:0;
height: 50px;
}
See http://jsfiddle.net/uKPEn/1/
It's a little tricky but I discovered by doing it that it is actually doable without javascript. Here is a fiddle to illustrate it http://jsfiddle.net/2LyUy/3/
You have to do 3 things:
wrap your two middle divs in a new div, for example with id="wrap".
put a different position attribute on your aside (for example "relative", which will actually not move your div at all)
then have fixed size counter and logo
The css gives that (don't forget to wrap your 2 middle divs with a new one):
aside#test { position: relative; }
/* so that the "absolute" below work as expected */
/* any of "relative" "absolute" or "fixed" positioning would work here, depending on the needs */
#countdown {
position: absolute; left:0; right:0; /* could be factored out if preferred */
top:0; height: 150px;
}
#logo {
position: absolute; left:0; right:0;
bottom:0; height: 50px;
}
#wrap {
position: absolute; left:0; right:0;
top:150px; bottom: 50px;
}
#addProject {
position: absolute; left:0; right:0;
top:0; height:50%;
}
#Nye {
position: absolute; left:0; right:0;
bottom:0; height:50%;
}
Here is the div wrapping code extract:
</div></div>
<div id="wrap"> <!-- added -->
<div id="addProject"
....
<br>
</div>
</div> <!-- added -->
<div .... id="logo"></div>
thanks for helping out. I have a site with a container div that I'd like to stretch to the bottom of the page. Using position: fixed I'm able to achieve this, but the footer text on the bottom is cutoff and you are unable to scroll down.
Using position: relative I'm able to scroll, but the container div does not stretch to the bottom of the page.
My code is as follows:
.container {
position: relative;
bottom: 0;
top: 0;
left: 50%;
margin-left: -480px;
width: 960px;
height: auto;
background-color: #1b1a1a;
}
.body {
width: 703px;
min-height: 340px;
margin: auto;
background-color: #f2f2f2;
padding: 20px;
overflow: hidden;
}
<div class="container">
<div class="header"></div>
<div class="body">
content content content
</div>
<div class="footer"></div>
</div>
Is this what you are looking for?
http://jsfiddle.net/gespinha/jrsxN/7/
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
.container {
width:100%;
height:100%;
position: absolute;
background-color: #1b1a1a;
}
.body {
background-color: #f2f2f2;
padding: 20px 20px 120px;
}
.footer {
width:100%;
height:100px;
position:fixed;
bottom:0;
background:#f00;
}