CSS вертикальная колонка не будет идти 100% по вертикали

Question

мой веб-сайт http://davewagnerart.com/index.html

Я хотел бы черный столбец, который имеет свои эскизы на слева, чтобы пройти весь путь к нижней части сайта ... похоже, не может это сделать. Мой CSS для тумб является:

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

Answer 1

я уже просматривали этот сайт в Firefox и хром, и это распространяется на нижней части сайта уже ....

Это сказанное вы также можете попробовать заменить высота: 100% с дном: 0

Answer 2

Вы устанавливаете фиксированную высоту до #painting_placement, ту же высоту нужно установить на миниатюры. Конечно, вместе с min-height.

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

Answer 3

Вы также должны установить высоту тела и элементов html.

html, body { 
    height:100%; 
} 

рассказывает дочерний элемент (#thumbnails), чтобы быть 100% высоты, он смотрит на его родитель, чтобы увидеть, как они велики, и это будет 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; 
}