Центрирование DIV и настройка на основе размеров браузера

Question

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

Вот сложная часть; Эта страница имеет навигацию с высотой 60px, и видео должно быть в формате 16: 9. Я хотел бы иметь возможность установить минимальную ширину и минимальную высоту в 800 пикселей в ширину и 450 пикселей в высоту. Видео не должно перекрывать навигацию, поэтому, если оно немного смещено по вертикали, это нормально. Я могу использовать jQuery, если необходимо, хотя CSS (3) будет предпочтительнее. Эта страница в основном для частного использования, поэтому я не слишком беспокоюсь о совместимости между браузерами.

Я понятия не имею, как этого добиться на этом уровне сложности. Мои мысли состоят в том, чтобы создать div, который заполняет остальную часть страницы, и центрировать его внутри этого div с абсолютным позиционированием. К сожалению, я не знаю, как сделать его изменяемого размера и остаться в правильном соотношении сторон. Если это поможет, я буду использовать для этого проекта и UStream, и Justin.tv.

Спасибо.

РЕДАКТИРОВАТЬ 1: я не могу понять, как сделать так, чтобы нижний элемент div заполнял остальную часть страницы, вычитая навигацию. Я думал, что height:100%; охватит это, но, к сожалению, это делает все 100% страницы, включая 60px навигацию.

Answer 1

Используйте этот плагин jQuery: FitVids

Горизонтальное и вертикальное центрирование с помощью CSS3 Flexbox (ограниченная поддержка браузера, но, как вы сказали, это не проблема)

Вот код (без префиксов продавцов для упрощения):

.parent{
      display: box;
      box-orient: horizontal;
      box-pack: center;
      box-align: center;
}

Примените это к родительскому элементу видео.

Теперь навигация не должна прерывать центрирование, но в этом случае вы всегда можете absolute позиционировать панель навигации. В верхней части будет вырезано видео, но 60px не так уж и плохо.

Answer 2

Вот как бы я это сделал:

var videoElement = $("#IDofYourVideo");

function SizeUpVideo(elm) {
    var W = parseInt($(window).width()),   //get browser width
        H = parseInt($(window).height()),  //get browser height
        ratio = 16/9,                      //set ratio
        videoH = H-60,                     //subtract 60px
        videoW = H * ratio;                //set width according to ratio

    if (videoW > W) {videoW=W; videoH=W*(1/ratio);} //if width is more than screen, do it the other way around
    if (videoW >= '800' || videoH >= '450') {
        elm.css({top: (H-videoH+60)/2, left: (W-videoW)/2, height: videoH, width: videoW});
    } else {
        elm.css({top: 60, height: 450, width: 800});
    }
};

SizeUpVideo(videoElement);

$(window).bind("resize", function() {
    SizeUpVideo(videoElement);
});

Скрипка: http://jsfiddle.net/bAXwK/

Answer 3

попробуйте этот код:

<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>