Как сделать высоту разделителя для обтекания жидкостью?

#css #html #height

#css #HTML #высота

Вопрос:

мой друг сделал это, но он не скажет мне, как он это сделал, но

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

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

И возможно ли также установить минимальную высоту, чтобы она не была слишком сжата и стала прокручиваемой страницей?

1. Какой URL-адрес страницы вашего друга? Нам было бы очень легко точно рассказать вам, как это делается, на живом примере.

2. Я видел нечто похожее на это, связанное с нижним колонтитулом div; не уверен, поможет ли это. В принципе, как мне было описано, для размещения div под областью содержимого использовалось отрицательное поле или отступ. Я думал, что это умно, но я никогда на самом деле не изучал, как это было сделано.

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

Ответ №1:

Ваш разделитель должен обладать следующими свойствами. Это придаст ему верхнее и нижнее поле в 30 пикселей, и оно будет регулироваться в зависимости от высоты вашего окна.

 .divider{
 position:absolute;
 top:30px;
 bottom:30px;
}

Проверьте рабочий пример на http://jsfiddle.net/zkebs /

Ответ №2:

Один простой способ — добавить немного отступов <body> , чтобы имитировать поле на вашем <div> , а затем сделать вашу <div> высоту 100%:

 <html>
    <body style="padding: 50px;">
        <div style="background: #eee; height: 100%;">
            Where is pancake house?
        </div>
    </body>
</html>

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

Вы можете использовать min-height: 100px; overflow-y: auto; , если хотите ограничить высоту и при необходимости получить полосу прокрутки.

1. проценты высоты не работают в css, насколько я знаю… Только если у вас есть конкретное измерение высоты для наследования.

2. @Ninjiangstar: Проценты высоты указаны по отношению к родительскому элементу, они работают просто отлично.

3. процент высоты, который я тестировал, наследуется только от родительского элемента, отличного от родительского элемента <body>. и родительский элемент должен иметь точную высоту, чтобы процент функционировал

4. @Ninjiangstar: Хм, у <body> действительно довольно специфическая высота. Ваша путаница заключается в том, что родительский элемент имеет автоматическую высоту, поэтому вы получите цикл обратной связи между родительской и дочерней высотами.

5. неважно… это странно, потому что 100% не работает для одного сайта, но работает само по себе, если напрямую скопировать из вашего кода … это не для моего более сложного сайта