last day (14 days later) » 

5:04 AM
0
A: Absolute positioned div with dynamic height

Notorious Pet0Update Its working in this jsfiddle.net This FIDDLE has an "add content" button which will show you it working with dynamic data. I just changed this ... .small-fixed-130-left.column { position:absolute; width:11.4285714286rem; top:0; left:0; bott...

 
when content gets added to the main content div via ajax, I'm pretty sure that the height stays the same as it was originally
 
I tested it for you in fiddle, by dynamically adding content, it works. jsfiddle.net/incept0/vn2wdbpm/3 see for yourself
@BenKilah Posted an updated fiddle showing it working
 
many thanks for your reply, I do appreciate it, while that works in your fiddle, it does really accomplish what I'm after, check the second last sentence of my original post, needs to be 100% page height, not the same height as the main content div, cheers
 
So you want it to go past the footer ? @BenKilah So to cover the entire height of <body> then ?
 
yep, i tried many ways but always needed to come back to figure out the body height and applying some js watching the main content div
heya
 
5:05 AM
You can take the div out of everything and put it right before the <body> tag...
is this closer to what you are looking for ?
 
ok let me try
 
I'll help figure it out, I think I'm just confused on what you actually need. :)
Oh wait, if i set the content to go x100 instead of x20, and hit the add content button, the black bar does not expand.
 
yup
 
which is because absolute positioned elements cannot expand like that. but fixed one's can
 
that's the issue, the content height is dymanic
 
5:08 AM
let me try with fixed real quick
 
sure
fixed kinda works, but the left nav has expanding elements
which become inaccessible if off the page unless i add scrolling i guess
 
yeah i just did fixed and it works... what do the expanding elements do? can you post them to the fiddle or is it too much code
 
it's a fair - it's submenus that expand under main menu headings
"fair bit of code"
 
are you able to post it, trying to get an idea of what your talking about but not quite clear
if the height expands, and the elements are in the left bar, do they move down? i would think they stay in the same place
perhaps you need to position the menu so it's top aligned in the left bar so they don't move down?
 
yup - fair long menu that has quite a few submenus, client likes it that way lol
 
5:12 AM
if you fixed position the menu elements then they will scroll with the page
Can you mock it up at all with a sample ?
 
let me check
yeah nah they dissappear off the bottom if u expand a menu that's right at the bottom of the page
 
did you put it in fiddle?
 
one sec
 
what are you wanting it to do ?
 
can u post your most recent fiddle and i'll add the menus ystem?
 
5:15 AM
if they click an expanding menu at the bottom of the page, instead of scrolling off the bottom, what behavior would you want instead.
 
can u see the menu system?
 
hmmm....
Did you click update ?
Then copy/paste the new URL it generates
 
ok perfect
if they click an expanding menu at the bottom of the page, instead of scrolling off the bottom, what behavior would you want instead.
oh i gotcha
it cant scroll to get to them
ok let me see what i can do
 
they just need to be accessible
 
5:35 AM
yeah i gotcha, trying to figure out a way to auto height that div so it expands when they do.
 
that's where i got stuck too, many thanks
 
well, its an improvement, still working on it though ...
 
getting there
im sure that could suffice if need be
 
i got it better but somehow broke the menu jquery hehe
i didn't even touch it!
see here... if you click the menu before "add content" button, it will make the scrollbar appear. if you click add content, it will expand the black bar to the height ...
but then the jquery breaks the menu somehow hehe
 
5:54 AM
don't u just love web design ui stuff.. im a php / javascript programmer but have to do css as well sometimes
 
same here :)
its good to get the knowledge though
So I added overflow: auto; to the body and to the divs
also height: auto; and min-height: 100%;
i took out the fixed positioning
im floating the bar to the left
#left-nav1 {
height: auto;
min-height: 100%;
margin: 0;
float: left;
background-color: #000;
overflow: auto;

}
the row since it's wrapping the divs, needed adjustment ...
.row {
height: auto !important;
min-height: 100% !important;
}
and added an id to the div holding the content and gave it overflow auto...
#maindiv {
overflow: auto;

}
set the structure up like ...
<div class="row">
<div id="left-nav1">Left Bar</div>
<div id="maindiv">Content area</div>
</div>
 
works?
 
Give it a try, the only thing that seems to be wrong on fiddle is the menu breaking after you expand the content area... but the sizing and everything works. If the jquery breaks on your actual code, then i'll try to figure out whats going on, but I just changed css and moved html around, shouldn't break any jquery .
 
can u post fiddle link?
 
if it did break the menu its just trying to find a selector that got moved, so not a big issue to find/correct
 
6:04 AM
all good mate, i might just roll with that as I have to bail (2year old about to lose it from boredom hehe) - thanks so much for your help.. I'll accept your answer back on the question and make a very positive comment :)
 
Glad to help. Keep up the good fight for us php devs. :)
 
you too :)
 
and good luck! :)
 

last day (14 days later) »