Элементы жидкости и вопрос переполнения - PullRequest
Новая
       18

Элементы жидкости и вопрос переполнения

0 голосов
/ 07 апреля 2009

Итак, вот пень, который я ударил.

Я создаю ... вещь. Он масштабируется под окно браузера, с некоторыми элементами управления вверху и довольно большим списком внизу. В любом случае, это в основном ячейка таблицы, размеры которой соответствуют окну браузера, чей размер равен размеру документа - 130 пикселей по высоте, а размер документа - 50 пикселей по ширине. Я хочу, чтобы это происходило, когда список элементов внутри этой ячейки больше, чем ячейка, чтобы он становился прокручиваемым с использованием переполнения css: auto.

Проблема в том, что я не могу этого сделать, только делаю весь документ прокручиваемым. В настоящее время ячейка не имеет никаких свойств, кроме valign: top, и в ней есть один div (в который записываются элементы списка), и для нее установлено значение overflow: auto. Тем не менее, он просто масштабирует весь документ, когда список становится длинным.

Я не хочу указывать статический размер, поскольку он соответствует размеру страницы.

Есть идеи?

Спасибо! -Dave

Ответы [ 5 ]

1 голос
/ 07 апреля 2009

Я не уверен, что правильно понимаю, но вот попытка, которая может дать вам идеи. 

<head>
<title>Test</title>
<style>
div.outer {
    background-color: red;
    position: absolute;
    top: 40px; 
    bottom: 40px;
    left: 40px;
    right: 40px;
}
div.inner {
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    background-color: aqua;
}
</style>
</head>

<body>

<div class="outer">
<div class="inner">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
</div>
</div>

</body>
0 голосов
/ 09 ноября 2012

Я думаю, вы должны рассмотреть шаблоны дизайна макета.

Пара советов:

  1. MediaQueries
  2. Используйте % вместо фиксированных значений, таких как px
0 голосов
/ 07 апреля 2009

если я не ошибаюсь, и ваш контент - только текст, вы можете добавить свойство переноса, хотя это не работает в Firefox, вы можете добавить wbr к вашему тексту

0 голосов
/ 07 апреля 2009

Решение buti-oxa очень приятно, но не работает в Internet Explorer. Для кросс-браузерного решения вам нужно назначить фиксированную высоту div, который содержит список. Вы не можете сделать это, используя только CSS, потому что высота, которую нужно назначить, зависит от высоты окна браузера. Но вы можете использовать простую функцию javascript, чтобы динамически назначать высоту div. Вот пример использования jQuery: 

function resizeDiv(){
    var h = $(window).height(); //maybe the window height minus the header and footer height...
    $("#yourDivId").css("height", h + "px");
}

Эту функцию следует вызывать при загрузке страницы и изменении размера окна пользователем: 

$(document).ready(function(){

    resizeDiv();

    $(window).resize(function(){
        resizeDiv();
    });

 });

Вы можете увидеть это в действии на этой демонстрационной странице, которую я разместил (изменить размер окна для тестирования): http://www.meiaweb.com/test/BMS_DM_NI/

0 голосов
/ 07 апреля 2009

Я думаю, что iFrame поможет. Поместите свою «вещь» в базовый URL, а затем используйте другую страницу с iFrame для загрузки. Когда «вещь» сходит с ума по размеру, появляются полосы прокрутки, но ваша внешняя страница не изменяется

Старая модная рамка тоже должна работать, но iFrames просто веселее ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...