2012-04-12 5 views
0

Я с этой проблемой для немного теперь ..Сохранять пропорции таблицы при изменении размера окна

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

Что мне нужно сделать, так что таблица всегда содержится в ее родительском элементе при каждом изменении размера окна?

Он должен делать это без создания полос прокрутки при сохранении 10px с верхней, левой, нижней и правой сторон родительского элемента?

http://jsfiddle.net/URwpA/10/

Вся помощь очень ценится!

+1

Может быть, 'overflow: auto;' '' hold'' именно то, что вы ищете. http://jsfiddle.net/URwpA/16/ Что вы имеете в виду без прокрутки. Вы можете использовать 'overflow: hidden ', если вам не нужны полосы прокрутки, но это просто скроет лишнее содержимое. –

ответ

1

Как насчет http://jsfiddle.net/URwpA/26/

В основном, удалите все ширины и высоты в пикселях от HTML, и добавьте td, th {height:16%} в CSS. (Я также немного почистил, удалив атрибут style с <div class="held">, потому что он столкнулся со стилем в блоке CSS.)

+0

Отлично, спасибо! – captainrad

0

хорошо во-первых, ваш CSS ссылается идентификатор для состоявшейся (#held), когда он должен быть на самом деле класс (.held)

Другая вещь с помощью position:absolute вы удаляете DIV hold из контекста потока, который поэтому оранжевый фон не распространяется на дно. Уберите это, и оно работает: http://jsfiddle.net/DigitalBiscuits/URwpA/22/

Это то, что вы искали?

+0

Я ищу календарь, содержащийся внутри его родителя. Если вы прокрутите список вниз в своем примере, вы увидите, что он ускользает. Затем я хочу иметь таблицу «шкала» с изменением размера окна, чтобы таблица всегда была полностью видна внутри окна. Проверьте это как пример. Теперь, если в элементе «hold» есть календарь на основе таблицы, он должен оставаться в пределах этих границ и выглядеть одинаково при изменении размера. http://jsfiddle.net/URwpA/24/ (измените размер своего окна браузера, чтобы увидеть, что я имею в виду.) Спасибо! – captainrad

+1

@captainrad Если вы хотите, чтобы ваша таблица масштабировалась с контейнером, почему ваши ячейки имеют фиксированную ширину и высоту в пикселях? –

+0

@ MrLister хорошая точка! Какой был бы лучший маршрут? установить минимальные и максимальные высоты и ширину? – captainrad

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