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 to share
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 to share