Изменение размера div с использованием css / html, но есть загвоздка

Question

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

#vid_window{ position:absolute; float:left; background-color:#000; width:100%; height:57%; margin-left:auto; margin-right:auto; overflow:hidden; }

В нижней части страницы находится «меню» для воспроизведения ассортимента видео в вышеупомянутом div, и видео, конечно, должно будет изменить размер с высотой div. Div абсолютно позиционируется, в соответствии с клиентом. Это не проблема:

#vid{width:100%;height:100%:}

Как это заполнит #vid_window

Вот проблема: при изменении размера страницы браузера «меню» начинает перекрывать окно vid. Я знаю, что могу уменьшить процент, но я может нет, для клиента. Они хотят, чтобы львиная доля страницы могла отображать видео, но они, конечно, не хотят, чтобы меню перекрывало окно или видео.

Вот вопрос: есть ли способ, чтобы vid_window и vid изменяли размеры в геометрической прогрессии в соответствии с окном браузера, чтобы при полном раскрытии окна значение vid_window составляло 57%, но если оно в два раза меньше, то vid_window будет, скажем, 30%?

Вот ссылка на страницу, если вы хотите:

страница

Answer 1

Как Джеймс говорит, что лучший способ, которым я могу придумать для вас, это установить класс в Div vid_window, установить высоту% в классе и проверить размер окна дисплея, чтобы определить ваши оптимальные настройки.Также я, вероятно, установил бы минимальную высоту, чтобы страница не опускалась ниже этой высоты, и для обратной совместимости посмотрите на Modernizr.http://www.modernizr.com/

------ РЕДАКТИРОВАТЬ ------

Что верхний и нижний колонтитулы никогда не будут удалены со страницы.Один из способов уменьшить ваши проблемы - установить высоту верхнего и нижнего колонтитула в процентах, чтобы они масштабировались с высотой тела

html,body { height:99%; min-height: 100%; }
header { height:22%; min-height: 100px; }
#content { height: 56%; min-height: 200px; }
footer { height:21%; min-height: 100px; }

Значения минимальной высоты могут быть такими, как вы думаетеподходит для наименьшей высоты, на которую вы хотите пойти.Процентная высота остальных должна автоматически масштабировать нижний колонтитул заголовка и, следовательно, ваш контент.Это, однако, заставит нижний колонтитул уйти со страницы в определенный момент (когда соблюдаются все минимальные ширины и окно браузера продолжает уменьшаться).Я считаю, что это было бы желательно и должно отвечать потребностям ваших клиентов.Если нет, то вы попадете в очень сложный javascript, который не всегда будет выполнять математику просто правильно из-за того, как каждый браузер обрабатывает отступы и вычисления высоты.Кроме того, если они отключат JavaScript, это никогда не будет работать.

Answer 2

Из того, что вы описали, звучит так, как будто вам лучше расположить меню внизу и использовать относительное позиционирование на vid_window.С небольшим JavaScript вы можете изменить его размер правильно, и это должно решить вашу проблему перекрытия.Если вам разрешено использовать его, вы можете быстро справиться с ним с помощью jQuery.