CSS Max Height Property

Question

Есть ли хороший кросс-браузерный способ установить свойство max-height DIV, и когда этот DIV выходит за пределы max-height, он превращается в переполнение полос прокрутки?

Answer 1

К сожалению, IE6 не делает, поэтому вы должны использовать выражение для IE6, а затем установить максимальную высоту для всех других браузеров:

 div{
       _height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE6 */
       max-height: 333px; /* sets max-height value for all standards-compliant browsers */
       overflow:scroll;
}

Переполнение: в большинстве случаев авто будет работать чаще, если произойдет какое-либо дополнительное проливание.

Answer 2

Я нашел это решение в посте 2005 года ( Min-Height Fast hack ). Это хак, но это простой и чистый CSS:

selector {
  max-height:500px;
  height:auto !important;
  height:500px;
}

Пример для максимальной высоты, но работает для минимальной высоты, минимальной ширины и максимальной ширины. :)

* Примечание: Вы должны использовать абсолютные значения, проценты не работают.

Все, что вам сейчас нужно, это "переполнение: прокрутка;" чтобы сделать эту работу с полосами прокрутки

Answer 3

selector
{
    max-height:900px;
    _height:expression(this.scrollHeight>899?"900px":"auto");
    overflow:auto;
    overflow-x:hidden;
}

Answer 4

Может быть, у вас есть div-обертка с высотой, заданной как ваш рост и переполнение: прокрутка. Тогда для внутреннего div не задана высота, и по мере роста он будет заполняться, а затем использовать полосы прокрутки первого div?

Answer 5

Большой взлом (в стиле RedWolves):

.divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;}
.divInner{border:1px solid navy;background-color:white;}

Я не получал любви от атрибута max-height, так что у меня уже было это, и я преуспел с этими двумя классами. Но это некрасиво, так что в поисках лучшего ударил этот вопрос. divMax, имеющий position:absolute, пропускает содержимое под ним, но контролирует максимальную высоту divInner до 200 пикселей.

Answer 6

Я нашел это из http://www.tutorialspoint.com/css/css_scrollbars.htm и немного изменил Кажется, работает как для IE9 и FF19

<style type="text/css">
.scroll{
    display:block;
    border: 1px solid red;
    padding:5px;
    margin-top:5px;
    width:300px;

    max-height:100px;
    overflow:scroll;
}
.auto{
    display:block;
    border: 1px solid red;
    padding:5px;
    margin-top:5px;
    width:300px;
    height: 100px !important;
    max-height:110px;
    overflow:hidden;
    overflow-y:auto;
}
</style>
<p>Example of scroll value:</p>

<div class="scroll">
    I am going to keep lot of content here just to show
    you how scrollbars works if there is an overflow in
    an element box. This provides your horizontal as well
     as vertical scrollbars.<br/>
    I am going to keep lot of content here just to show
    you how scrollbars works if there is an overflow in
    an element box. This provides your horizontal as well
     as vertical scrollbars.<br/>
    I am going to keep lot of content here just to show
    you how scrollbars works if there is an overflow in
    an element box. This provides your horizontal as well
     as vertical scrollbars.<br/>
    I am going to keep lot of content here just to show
    you how scrollbars works if there is an overflow in
    an element box. This provides your horizontal as well
     as vertical scrollbars.<br/>        
     </div>

<br />
<p>Example of auto value:</p>

<div class="auto">
    I am going to keep lot of content here just to show
    you how scrollbars works if there is an overflow in
    an element box. This provides your horizontal as well
     as vertical scrollbars.<br/>
   </div>