Свойство максимальной высоты CSS

Ответ 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;
}

Overflow: auto, скорее всего, будет работать в большинстве случаев, если у вас будет дополнительный перелив.

Ответ 2

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

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

Пример для max-height, но он работает для min-height, min-width и max-width.:)

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

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

Ответ 3

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

Ответ 4

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

Ответ 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 до 200px.

Ответ 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>