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:
<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... :'(
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:
<div class="fixed">
<div class="scrollable">
<!-- lots of content here -->
</div>
<div class="fixed_bottom">
<!-- always visible content here -->
</div>
</div>
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... :-[
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.
<!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>