Минимальная высота не работает на другом сервере.

#css #html

#css #HTML

Вопрос:

Я создаю новую страницу для одного из моих веб-сайтов. В макете первый раздел должен адаптировать содержимое к середине экрана в зависимости от размера экрана, а другой раздел может иметь только высоту содержимого. Здесь все работает нормально: http://jilson.me/clickmeter/h4 /

Но когда я использовал тот же код для другого сервера, он не работает. http://mvc4.9nl.com/Я уверен, что это не зависит от сервера. Но определенно что-то не так, и я не могу понять, почему!

Вот код HTML и CSS, используемый для этого раздела.

 <div class="jumbotron vertical-center white iphone-jumbo-close first-top-section">
</div>


.vertical-center {
    min-height: 768px;
    width: 100%;
    text-align: center;
    font: 0px/0 a;
}
.vertical-center:before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
  

Пожалуйста, помогите мне в этом.

Комментарии:

1. Этот сайт предоставляет 20 различных ресурсов, которые не удалось получить. После проверки элемента, на который вы ссылаетесь, для него не найдено стилей. Очевидно, что код, который вы здесь показываете, не применяется к сайту, возможно, потому, что он находится в одном из отсутствующих ресурсов.

2. @gpgekko: стили отображаются при проверке элементов, и ресурсы загружаются очень хорошо. Но один и тот же код работает по-разному для разных страниц.

3. Когда я скрываю content: " "; in .vertical-center:before { на первом сайте, я получаю тот же эффект, что и на втором сайте. Так что, вероятно, второй сайт плохо читает этот атрибут. Кто-нибудь знает, почему это так?

Ответ №1:

Это должно сработать.

 .vertical-center {
    min-height: 768px;
    width: 100%;
    text-align: center;
    font: 0px/0 a;
    height: 100%;
}