Skip to main content ↑ ↓
css, absolute, relative, fixed... darn!!!! LOL Started by emanuele · · Read 9437 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

css, absolute, relative, fixed... darn!!!! LOL

I'm trying to do a thing with the css and I'm a bit stuck, so...
I structured the html like this, not sure if it is correct:
Code: [Select]
<div class="fixed">
    <div class="scrollable">
        <!-- lots of content here -->
    </div>
    <div class="absolute">
        <!-- always visible content here -->
    </div>
</div>

class="fixed" is a kind of overlay position: fixed, height: 75%
class="absolute" should be a box always visible fixed height (about.... let's say 60px).
class="scrollable" is where I'm stuck. it should contain a lot of text and as such have an overflow: auto attached (I think), it should have a flexible height to adapt to its container, but should never overlap with the absolute.

I feel I'm doing it totally wrong, but I can't figure out what's wrong... :'(
Bugs creator.
Features destroyer.
Template killer.

Re: css, absolute, relative, fixed... darn!!!! LOL

Reply #1 –

not sure what you are doing there (chatbar or something like that?!?)..
- fixed is always visible with a fixed position. a good example is that black top menu here.
- absolute is an absolute position, but it's not fixed -> this it scrolls with the window
-relative is relative from the position you'd expect it to be..

You'd probably want something like this:
Code: [Select]
<div class="fixed">
    <div class="scrollable">
        <!-- lots of content here -->
    </div>
    <div class="fixed_bottom">
        <!-- always visible content here -->
    </div>
</div>
Thorsten "TE" Eurich
------------------------
 

Re: css, absolute, relative, fixed... darn!!!! LOL

Reply #2 –

Yep, let's say sort of chatbox-like thing.

Makes sense... makes a lot of sense!
And what would you use in order to let the "scrollable" box to be "as high as possible", but should start above the fixed_bottom.

Dunno if the sketch attached is of any help in understanding what I'd like to obtain... :-[
Bugs creator.
Features destroyer.
Template killer.

Re: css, absolute, relative, fixed... darn!!!! LOL

Reply #3 –

Not 100% sure but it should be enough to give the sroll class a 100% height. the lower div will always stay on the floor of the fixed container.
Code: [Select]
<!doctype html>
<html>
<head>
	<style>
		.fixed {
			position: fixed;
			right: 0;
			width: 150px;
			height: 75%;
		}
		.scroll {
			overflow: scroll;
			height: 100%;
		}
	</style>
	<title>test</title>
</head>
<body>
	<div class="fixed">
		<div class="scroll">
			afsdfsadf asd
			affdas
			sadfsdfa
			asdfsa
		</div>
		<div class="bottom">
			this is my chatbar_description;
		</div>
	</div>
</body>
</html>
Thorsten "TE" Eurich
------------------------