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;
}
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
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
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%;
}
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.
Try it,
#thumbnails {
position:absolute;
top: 110px;
width: 190px;
height: auto;
padding-bottom:10px;
background-color: #000000;
}