Css vertical column won't go 100% vertical

my website is http://davewagnerart.com/index.html

I'd like a black column where my thumbnails are on the left to go all the way to the bottom of the site ... can't seem to get it to do that. My CSS for the thumbs:

#thumbnails  {
    position:absolute;
    top: 110px;
    width: 190px;
    height: 100%;
    min-height: 100%;
    background-color: #000000;
}

      

+3


source to share


5 answers


You should also set the height of the body and html elements.

html, body {
   height:100%;
}

      



giving the child (#thumbnails) 100% height, its parents should see how big they are, and that will be 100% of them. However, if the parent elements don't know how big they are, the child cannot do as said.

You can inquire about the species if you are interested

+1


source


I have looked at this site in firefox and chrome and it is spreading to the bottom of the site already ...



Having said that, you can also try replacing height: 100% from bottom: 0

0


source


You set the fixed height to #painting_placement

, the same height should be set on the thumbnail. Of course, together with min-height

.

#thumbnails {
    height: 770px; /* height of #painting_placement + top indentation */
    min-height: 100%;
}

      

0


source


You can use media queries if tou wants to make it work for different resolutions

eg:

@media screen and (max-width: 720px) {
    #thumbnails  {
    position:absolute;
    top: 180px;//increase the value of top
    width: 190px;
    height: 100%;
    min-height: 100%;
    background-color: #000000;
    }
}

      

Like wise you can change the max width and top to suit each resolution, which will work in all browsers.

0


source


Try it,

#thumbnails  {
    position:absolute;
    top: 110px;
    width: 190px;
    height: auto;
padding-bottom:10px;    
    background-color: #000000;
}

      

0


source







All Articles