Вертикальное центрирование с фиксированным заголовком

У меня есть страница с фиксированным заголовком. Мне нужно, чтобы вся страница была вертикально центрирована таким образом, что заголовок всегда исправлен, но вся страница имеет вертикальную ориентацию.Вертикальное центрирование с фиксированным заголовком

Я не могу понять, как это можно сделать, потому что требуется больше, чем просто возиться с отрицательными полями и абсолютным позиционированием (по крайней мере, я не смог найти решение, которое работает ...). Я создал jsFiddle ...

System хочет, чтобы добавить код так вот основная структура вы можете увидеть в jsFiddle

<body> 
    <div id="header"><h1>HEADER</h1></div> 
    <div id="content"> 
     <p>This is some content.</p> 
    </div> 
</body>

источник

2013-09-17 Michal Artazov

Итак, вы хотите заголовок в верхней и остальной части содержания вертикально по центру? Ваше утверждение: «Это некоторый контент. Я хочу, чтобы он был вертикально центрирован вместе с фиксированным заголовком», это путает. – dezman

Хорошо, я изменил это. Заголовок не должен быть наверху, если содержимого недостаточно (например, страница имеет полосу прокрутки) –

Вы хотите, чтобы 'content' div находился в середине порта представления? или в середине оставшегося пространства после заголовка? – avrahamcool

Я не уверен, что вы хотите использовать это для .. Это работает в современных браузерах, но не во всех браузерах.

Проблема обычно заключается в том, что элементы не имеют фиксированной высоты. Мы не знаем высоту экрана в пикселях, поэтому высота должна быть динамической. Старые браузеры не дают элементам определенную высоту, пока они не будут заполнены.

http://jsfiddle.net/Mz6hy/25/

Испытано это в Chrome, Safari и Firefox ..

<head> 
    <style> 
    body 
    { 
     width   : 100%; 
     background  : #fff; 
     margin   : 60px 0 -60px 0; 
    } 
    h1 
    { 
     text-align  : center; 
    } 
    #content 
    { 
     position  : absolute; 
     top    : 50%; 
     height   :100px; 
     margin-top  :-50px; 
    } 
    #footer 
    { 
     position  :absolute; 
     top    :100%; 
     height   :50px; 
     margin-top  :-50px; 
    } 
    </style> 
</head> 
<body> 
    <h1>HEADER</h1> 
    <div id="content"> 
     <p> 
      This is some content.<br/> 
      I want it to be verticaly centered along with the fixed header. The header should always be fixed, but it should be placed in a way that the overall page is verticaly centered. 
     </p> 
     <p> 
      Some more content 
     </p> 
    </div> 
    <div id="footer">Editional content</div> 
</body>

источник

2013-09-17 21:19:57 Chris

, который, похоже, не работает. Если я добавлю больше контента, чтобы страница стала прокручиваемой, заголовок не фиксирован и прокручивается также ... –

Итак, сделайте «положение: фиксированное» h1, это сделает его относительно окна браузера, а не тела, свитки. Вы также можете сделать это с нижним колонтитулом, если хотите. Но каков будет контент? Какова цель этой страницы? Может быть, есть лучшее решение, если вы делитесь некоторыми деталями. Например, вы можете использовать Bootstrap как способ быстро сделать более сложный макет довольно легко. – Chris

1) Если вы хотите, чтобы содержание быть центрирован в пространстве, которое осталось после заголовка: видеть, что Working FiddleПроверено на: IE10, IE9, IE8, Chrome, FF, Safari

2) Если вы хотите, чтобы содержание быть центрирован в вьюпорте, независимо от заголовка: видеть, что Working FiddleПроверено на: IE10, IE9, IE8, Chrome, FF, Safari

это же HTML разметка для обоих примеров, разница в CSS (второй проще, но результат уродливее)

HTML

<div id="header"><h1>YOUR HEADER</h1></div> 
<div id="container"><!-- only that container shall be scrollable --> 
    <span class="centerer"></span><!-- this comment is important 
    --><div id="content"> 
     YOUR CONTENT 
    </div> 
</div>

Примечание: комментарий важно, потому что новая строка рассматривается как пробел между inline-block сек элементом. что приводит к пробелу в выходе. с использованием комментария, код по-прежнему доступен для чтения, но между элементами нет пробелов.

источник

2013-09-17 23:07:25 avrahamcool

Это можно сделать очень просто с помощью flexbox и измерения 100vh на основном контейнере.

CSS:

height: 100vh; 
display: flex; 
display: -webkit-flex; 
justify-content: center; 
-webkit-justify-content: center; 
flex-direction: column; 
-webkit-flex-direction: column;

Смотреть полный демо: https://jsfiddle.net/f8syhrkv/

источник

2016-01-05 11:57:35

Вертикальное центрирование с фиксированным заголовком

ответ

Смежные вопросы