how to use flexible height

Discussion in 'CSS' started by cryoffalcon, Mar 17, 2012.

  1. #1
    Hi in my test post of my test blog, i am using quick sand to sort the items but the problem is as the items grow i have to increase its min-height manually, the disadvantage is not that i am doing it manually the disadvantage is that if some one makes less items appear still there will be empty space left downwards as it says min-height 1430px

    I know there is a way to add flexibility to it, so if someone decreases the number of items the height automatically decreases and vice versa. If you leave it without height, then what happens that it do increase height or decrease height automatically BUT during the effect of decreasing items or increasing items the background appears and the post area remains small.
    Here on this link you can see what i am taking about http://bloghutsbeta.blogspot.com/2012/03/testing-2_04.html
    if you just click those buttons that has shining text, if you click it will sort items and decrease but you will see still a huge space is left behind.

    Its really destroying the awesomeness of this sorting jquery.
    <style type="text/css">
    ul.gamecolumns {
    min-height:1430px;
    list-style: none;
    margin: 0px; 
    padding: 0px;
    }
    </style>
    Code (markup):
     
    cryoffalcon, Mar 17, 2012 IP
  2. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #2
    Forget about min and max heights. In order to be flexible, the element's height has to be 100%, and the divs inside have to be relative (I prefer to say they musn't be absulute), otherwise it won't work.
     
    wiicker95, Mar 17, 2012 IP
  3. cryoffalcon

    cryoffalcon Peon

    Messages:
    102
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi,
    thanks for your quick reply, well i tried your method but it doesn't work, the position is relative already, i haven't used any absolute in it, except for that tooltip that i am using as there i need absolute.
    I used 100% it works but the problem is when you click on sorting buttons the change of height occurs at that time the disqus comment area overlaps over these items and later it renders to height 100% and makes things okay.
    So it kind of looks ugly when it happens, so i guess here css has failed me, i am going to use javascript instead to do so adjustHeight: &#39;dynamic&#39;
    by making it dynamic it works fine, earlier i had it set to false.
    Thanks man for your response i really appreciate that ^_^
     
    cryoffalcon, Mar 18, 2012 IP
  4. stevemartin1131

    stevemartin1131 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Exactly just give it as 100% first and note.Later you can adjust.
     
    stevemartin1131, Mar 23, 2012 IP