Увеличить высоту div до конца страницы, если есть margin-top

#css #scroll #height #margin

#css #прокрутите #высота #поля

Вопрос:

У меня есть следующий код:

 #content    {
            left: 50%;
            margin-left: -498px;
            margin-top: 186px;
            width: 984px;
            min-height: 100%;
            background-color: rgba(255, 255, 255, 0.875);
            font-size: 16px;
            position: absolute;
            z-index:2;
            padding-left: 8px;
            padding-right: 8px;
            padding-bottom: 8px;
            padding-top: 8px;
            font-family: calibri, sans-serif;
            }
  

Я взял min-height: 100%; чтобы сделать div до конца, это, конечно, работает. Но у меня также есть изображение заголовка и меню, поэтому я написал margin-top: 186 пикселей;
Но теперь он будет растянут немного больше, чем до конца (поэтому у меня всегда есть возможность прокручивать, даже если это не нужно)

Таким образом, в основном высота div должна быть: 100% — 186 пикселей

Спасибо!

Ответ №1:

Используйте свойство calc в css, чтобы сделать именно то, что вы написали:

 height: calc(100% - 186px);
  

Это имеет отличную поддержку во всех современных браузерах, включая IE9. В качестве запасного варианта для IE8 (если вас это вообще волнует), вы можете сначала установить высоту на 100%, тогда только пользователи с этим браузером получат полосу прокрутки.

Ответ №2:

Вы можете разместить свой div с абсолютной позицией для этого, используя приведенный ниже код

 #content{
 top: 0;
 bottom: 0;
 position: absolute;     
}