Question

我的网站是http://davewagnerart.com/index.html

我喜欢黑色的列，左边有我的缩略图，一直到网站的底部......似乎无法做到这一点。我的拇指的CSS是：

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

Answer 1

您还必须设置正文和html元素的高度。

html, body {
   height:100%;
}

告诉子元素（#thumbnails）高度为100％，它会向父母看它们有多大，并且它们将是100％。但是，如果父元素不知道它们有多大，则子元素不能像它所说的那样。

如果您有兴趣，可以了解视口

Answer 2

我已经在firefox和chrome中查看了该网站，并且它已经扩展到网站的底部......

话虽如此，你也可以尝试用底部替换高度：100％：0

Answer 3

您将固定高度设置为#painting_placement，必须将相同高度设置为缩略图。当然还有min-height。

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

Answer 4

如果想要让它适用于不同的分辨率，你可以使用媒体查询

例如：

@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;
    }
}

同样明智的是，您可以根据每个分辨率更改最大宽度和顶部，这将确保它可以在所有浏览器中使用。

Answer 5

试试这个，

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

css垂直列不会100％垂直

5 个答案: