In order to force an element to the bottom of its container I need css and html like
#container {
position: relative;
width: 100%;
min-height: 100%;
}
#content {
width: 800px;
min-height: 100%;
margin: 0 auto;
padding-bottom: 100px;
}
#footer {
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
}
<div id="container">
<div id="content"></div>
<div id="footer"></div>
</div>
But in order to fix the height of the content div to a minimum of 100% in Safari I need to have css like this
#content {
position: absolute;
left: 0;
right: 0;
width: 700px;
min-height: 100%;
margin: 0 auto;
padding-bottom: 100px;
}
This causes the footer to not stick to the bottom of the container when the content div's height expands beyond 100%.
Is there a way to have these two affects take place simultaneously?
Related
The below code is the closet I was able to achieve and exactly how I need it to function, the only problem with this approach is that because the fixed div is layered on top of the main div, it renders the main container not clickable.
This is how I need the layout to function:
There should be three columns, the outer two columns (sidepanels, left and right) are fixed.
The header and footer are also fixed and take up the max width of the
center "main" column (and are positioned in the center like the center "main" column).
On window resize, only the width of the center column (along with the
header and footer) is auto adjusted while the side columns stay the same
width (squeezing the center column).
I am trying to avoid the use of flexbox for browser compatibility.
body {
background: #333;
color: #FFF;
margin: 0;
height: 100%;
max-width: 1240px;
margin: 0 auto;
}
.fixed {
position: fixed;
z-index: 1;
height: 100%;
width: 100%;
max-width: inherit;
}
.main {
background: #444;
position: relative;
padding: 70px 10px;
height: 1000px;
width: auto;
min-width: 280px;
max-width: 800px;
margin: 0 220px;
}
.header,
.footer {
position: absolute;
background: #555;
height: 60px;
left: 220px;
right: 220px;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.left,
.right {
position: absolute;
top: 0;
width: 220px;
background: #666;
height: 100%;
}
.left {
left: 0;
}
.right {
right: 0;
}
<div class="fixed">
<div class="left">left</div>
<div class="header">header</div>
<div class="footer">footer</div>
<div class="right">right</div>
</div>
<div class="main">
main
</div>
i would like to use a website with fixed header/footer and a scrollable div in between.
Only the div in the middle should scroll, no scrollbar for the whole site (that's why body overflow is hidden).
My attempt so far:
#container1 {display:block;padding-top:60px;overflow-y:scroll}
#container2 {display:none;padding-top:60px;overflow-y:scroll}
body{overflow:hidden}
The scrollbars are shown but too much on the right, also they are not scrollable?
PS: Unfortunately the switching between the DIVs don't work at JSFiddle, don't know why...
If the header and footer have explicit heights, it could be achieved simply by positioning the middle DIV absolutely and using top/bottom offsets with the respect to the height of the header/footer.
Then we can add overflow-y: auto to the middle DIV — Example:
#divLinks {
overflow-y: auto;
position: fixed;
top: 25px;
bottom: 40px;
width: 460px;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#divLinks {
overflow-y: auto;
position: absolute;
top: 25px;
bottom: 40px;
left: 0; right: 0;
}
#page{height: 100%;width:480px;margin: 0 auto; position: relative;}
#header{position:absolute;top:0;left: 0;right: 0;z-index:998;height:25px;background:#5f5f5f}
#bottom{position:absolute;bottom:0;left: 0;right: 0;z-index:999;height:40px;background:#5f5f5f}
<div id="page">
<div id="header">Header</div>
<div id="divLinks">
<div id="container1">First<br><br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
<div id="container2"> second<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1</div>
</div>
<div id="bottom">First Page - Second Page</div>
</div>
The easiest way, in my opinion, is to use fixed elements, like this:
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
and
body {
margin: 0;
overflow: hidden;
}
header {
position: fixed;
top: 0;
left: 0;
background-color: red;
width: 100vw;
height: 2em;
}
main {
position: fixed;
top: 2em;
left: 0;
width: 100vw;
height: calc(100vh - 4em);
background-color: green;
y-overflow: auto;
}
footer {
position: fixed;
bottom: 0;
left: 0;
background-color: blue;
width: 100vw;
height: 2em;
}
I have a website made of "pages" (100% height on visible area). Please look at the following css:
html {
height: 100%;
}
body{
height:100%;
margin: 0 auto;
}
.page{
height: 100%;
margin: 0 auto;
min-height: 700px;
min-width: 1024px;
}
.content {
margin: 0 auto;
text-align: center;
height: 100%;
min-height: 800px;
min-width: 1024px;
}
.footer {
width: 100%;
min-height: 200px;
background-color:red;
}
.hidden{
width: 100%;
height: 500px;
background-color:blue;
}
.image {
display:block;
height: 100px;
width: 100px;
}
And this is the code:
<div class="page">
<div class="content">
<img class="image" src="img/image.png1">
<img class="image" src="img/image.png2">
<img class="image" src="img/image.png3">
<div class="hidden" style="visibility:hidden">
</div>
</div>
<div class="footer">
</div>
</div>
I need:
1) the footer to be aligned bottom when the page loads
2) after some seconds, with javascript I show the hidden div, and the footer must slide down.
I can't obtain these two things at the same time, because I can obtain 1) with
footer {
position: absolute;
bottom: 0;
}
but in this way when I show the hidden div it overlaps the footer.
Otherwise if I remove this last code, when the hidden div appears the footer slides down correctly, but when I load the page the footer is not at the bottom.
Does someone have any advice?
How about;
position: relative;
bottom: -100%;
What worked for me is the following code:
.footer {
width: 100%;
min-height: 200px;
background-color:red;
margin-top: 100vp;
}
The thing is that the footer is not seen until the user scrolls, you could
give it a less than a 100vp margin-top but it depends on the footer height which can change.
NOTE: vp means viewport height
You should try with this code:
html {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
I've been searching everywhere and can't find a good solution for this.
So I have two divs, same height, that divide the page in not equal parts, a smaller one ("Small") and a bigger one ("Bigger"). I want them both to have position: fixed. "Smaller" is okay and where I want it but I can't put "Bigger" fixed right with body width 960px. When I put right: 0 he puts the div outside of the body width 960px and that's not what I want.
Any ideas for this?
Here's the CSS:
.Bigger {
position: fixed;
margin: 0 auto;
top: 160px;
width: 700px;
height: 800px;
background-color: blue;
}
.Smaller {
position: fixed;
top: 160px;
margin: 0 auto;
width: 215px;
height: 800px;
background-color: blue;
}
So I'm assuming by body 960px, your meaning, a parent div(content wrapper) of the two other divs that is margin 0 auto to keep it centered.
Just use position absolute, it fixes the div to the parent. Position fixed fixes the div to the window... that is why it's appearing outside the parent div.
For example if your html is like
<div class="container">
<div class="Bigger">
</div>
<div class="Smaller">
</div>
</div>
you could have css like :
.container {
position: relative;
width: 960px;
margin: 0 auto;
}
.Bigger {
position: absolute;
top: 160px;
right: 0;
width: 700px;
height: 800px;
background-color: blue;
}
.Smaller {
position: absolute;
top: 160px;
left: 0;
width: 215px;
height: 800px;
background-color: blue;
}
I'm trying to get a div to fill the remaining height of a div. Here's my HTML and CSS:
CSS:
* {
padding: 0px;
margin: 0px;
}
#container {
margin: 85px auto 0px auto;
background: #444444;
min-height: 500px;
width: 900px;
}
#topbar {
width: 900px;
height: 85px;
background: #555555;
}
#leftbar {
width: 250px;
height: 100%;
background: #666666;
}
HTML:
<div id="container">
<div id="topbar">
</div>
<div id="leftbar">
</div>
</div>
I expected leftbar to fill the height between the bottom of topbar and the bottom of container, but it's scretching container so that leftbar is 100% of the page height.
You can stretch the leftbar with absolute positioning and setting the top/bottom values:
* {
padding: 0px;
margin: 0px;
}
#container {
position: relative;
margin: 85px auto 0px auto;
background: #444444;
min-height: 500px;
width: 900px;
}
#topbar {
width: 900px;
height: 85px;
background: #555555;
}
#leftbar {
position: absolute;
top: 85px;
bottom: 0;
width: 250px;
background: red;
}
Fiddle:
http://jsfiddle.net/robertp/CQ7pf/
Try adding this to container:
position: relative;
and then add this to leftbar:
position: absolute;
top: 0;
bottom: 0;
Set your left bar to position: relative;
So leftbar should be container's height minus topbar's height. Since container and topbar have hard-coded height values, it follows that leftbar will have to be hard-coded also. It's not the prettiest thing in the world but it's simpler than the alternative, JavaScript.
If container is 500px in height, subtract the height of topbar (85) and container's margin (85) to arrive at a height of 330px. Since container uses min-height, use min-height for leftbar also to allow it to stretch the container if need be. You should also change leftbar's position to relative to render the height of container correctly.
Bottom line:
#leftbar {
position: relative;
min-height: 330px;
}