Positioning absolute and relative elements with css
Matthias
I tried to position html elements, but a failed badly. My html code is quiete simple:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<header>Header</<header>
<div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
<br/><br/>
Content
<br/><br/><br/>
</div>
</div>
<footer>Footer</footer>
</body>
</html>
And the associated css file:
* {
font-size: larger;
text-align: center;
}
body{
background-color: #888888;
margin: 0;
}
header{
background-color: #ffff88;
}
#content{
background-color: #ff8888;
}
#sidebar{
background-color: #88ff88;
float: left;
width: 300px;
}
footer{
background-color: #8888ff;
}
At the end the site should look like: 
With a relative Header, footer and Content. The sidebar should have it's own scroll bar and should be behind footer and header, if they are in view.. Like here: 
But the footer should always be on the bottom or "topsy". The withe and transparent box should be clipping you can see currently in your browser.
When I tried to du this I got this mistakes: 
The Footer is not at the bottom, when the Content is too small.
Or: The footer is not at the bottem, when I scrolled down. 
Does someone know how to handle this issue with css?
Thank you very much!
Matthias
After a while a friend of mine helped me to get a nice solution, without JavaScript for the footer. Last one is difficult to realize if, the Content or the size of the page changes. Here is the solution we found (with a simple JavaScript for the fixed sidebar). the html-file:
<html>
<head>
<title>Footer Test</title>
<link rel="stylesheet" href="main.css">
<script>
function posSidebar(event){
var b = document.getElementById('wBox').clientHeight;
var w = window.innerHeight;
var s = window.pageYOffset;
document.getElementById('sidebar').style.top = Math.max(0, 30-s) + "px";
document.getElementById('sidebar').style.bottom = Math.max(w-b+s-0,0) + "px";
}
window.onscroll = posSidebar;
</script>
</head>
<body>
<div id="wBox">
<header>
<p>Header</p>
</header>
<div id="body">
<div id="sidebar">
<p id="log">Sidebar</p><p id="log1">Sidebar</p><p id="log2">Sidebar</p><p id="log3">Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
<p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
<p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
<p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
<p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
<p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
</div>
<div id="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><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>
</div>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
And the css-file:
*{
margin:0;
text-align: center;
font-size: 16px;
}
body{
position: absolute;
width: 100%;
bottom: 30px;
top: 0px;
background-color: #999;
}
div#wBox{
min-height: 100%;
background-color: #666;
position: relative;
}
footer{
height: 30px;
background-color: #9f9;
width: 100%;
}
#sidebar{
position: fixed;
top: 30px;
bottom: 0px;
left: 0px;
width: 200px;
background-color: #f99;
overflow: auto;
}
#content{
position: relative;
background-color: #ff9;
margin-left: 200px;
}
header{
height: 30px;
width: 100%;
background-color: #99f;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Compiling error during using ant to release android package
- Next: How to exclude fields from isDirty() check?
Related
Related Related
- 1
relative and absolute; responsive center positioning? bootstrap css
- 2
Absolute and relative positioning at the same time in CSS
- 3
CSS positioning (relative, absolute inside relative) + overlapping issue?
- 4
Absolute positioning inside relative positioning?
- 5
Issue with absolute/relative positioning
- 6
Absolute and relative positioning in menu
- 7
Problems with relative and absolute positioning
- 8
CSS Positioning relative divs with image and buttons in absolute container
- 9
I don't understand absolute and relative positioning in CSS
- 10
Relative Positioning vs. Absolute
- 11
Absolute positioning working without relative positioning in the parent
- 12
Absolute positioning within relative positioning issue
- 13
CSS positioning independently of other overlapping elements (without position: absolute)
- 14
A CSS absolute positioning mystery
- 15
CSS Positioning -- Absolute Confusion
- 16
CSS - absolute positioning issue
- 17
CSS Relative Positioning Not Working
- 18
Relative Positioning in CSS
- 19
CSS relative positioning and flow
- 20
css inline elements inside absolute box which is inside relative box
- 21
Positioning pseudo elements without absolute
- 22
Relative vs Absolute in CSS
- 23
Positioning two blocks in absolute position for desktop and relative position for mobile using CSS or Jquery
- 24
Positioning two blocks in absolute position for desktop and relative position for mobile using CSS or Jquery
- 25
Positioning div relative (absolute) to a fixed navbar
- 26
Absolute and relative positioning involving media queries?
- 27
Positioning text over canvas: relative/absolute positioning? z-index?
- 28
CSS absolute positioning and resizing windows
- 29
CSS - absolute positioning SVG (IE)
Comments