CSS: скрыть элемент, но сохранить ширину (а не высоту)

  • display:none полностью скроет элемент, как если бы его ширина и высота были равны нулю
  • visibility:hidden, с другой стороны, скроет элемент, но сохранит в документе прямоугольник исходной ширины и высоты элемента.

Есть ли способ с помощью чистого CSS скрыть элемент так, чтобы он занимал нулевую высоту, но имел первоначальную ширину? Установка его высоты на ноль не работает, потому что я не знаю, на какую высоту установить элемент, когда я хочу показать его снова.

В частности, я хочу добиться следующего:

#top ul        {take up zero height but original width}
#top:hover ul  {restore original dimensions}

Изменить: решено! Идея состоит в том, чтобы установить height:auto для восстановления исходной высоты.

См. здесь http://jsfiddle.net/yP59s/ полную версию или здесь css:

ul {margin:0px}
#top {border:1px solid}
#top ul {height:0px;overflow:hidden}
#top:hover ul {height:auto;}

и html:

<div id="top">
    <h1>foobar</h1>
    <ul>
        <li>foo</li>
        <li>bar</li>
    </ul>
</div>
blubber

hide css width height
person josch    schedule 21.05.2013    source источник
comment
Просто установите height: auto, когда вы хотите «восстановить» высоту.   -  person powerbuoy    schedule 22.05.2013
comment
Я бы не рекомендовал использовать top в качестве идентификатора элемента, это зарезервированное слово.   -  person Axel Amthor    schedule 22.05.2013
comment
На самом деле это не отвечает на ваш вопрос, но вы можете использовать маленькую высоту (например, 1 пиксель или 2 пикселя) вместо 0. В противном случае при высоте 0 не будет площади поверхности над чем парить.   -  person Sildoreth    schedule 22.05.2013
comment
@AxelAmthor фактический идентификатор не верхний - я просто изменил его, чтобы вставить сюда   -  person josch    schedule 22.05.2013
comment
@Sildoreth высота установлена ​​​​для ul внутри #top - так что, пока все, что находится в #top, не изменяется, все в порядке   -  person josch    schedule 22.05.2013
comment
@powerbuoy да, это действительно то, что я искал - я добавил несколько дополнительных комментариев к ответу Акселя Амтора.   -  person josch    schedule 22.05.2013

Ответы (2)


arrow_upward
8
arrow_downward 

#top         { width: 300px; height:0px; max-height:0px; }
#top:hover   {height: auto; width: 300px; }

http://jsfiddle.net/G5cgY/

person Axel Amthor    schedule 21.05.2013
comment
height:auto это то, что я искал, спасибо! Хотя его нужно сочетать с visibility:hidden, когда он не находится, и visibility:visible, когда он находится, потому что в противном случае содержимое все еще отображается, даже если его высота равна 0px. - person josch; 22.05.2013
comment
проверьте jsfiddle, дав ему overflow:hidden достаточно - person Axel Amthor; 22.05.2013

arrow_upward
1
arrow_downward

используя css

<a href="#box1">Show Box 1</a>|<a href="#box2">Show Box 2</a>|<a href="#hidebox">Hide All</a>

<div id="box1" class="box"> Contents of Box 1 </div>
<div id="box2" class="box"> Contents of Box 2 </div>

и CSS

.box{
border: 2px solid #ccc;
padding:20px;
margin:20px 0 0;
max-height:150px;
max-width:300px;
display:none;  }



.box:target{
    display:block;
}

и я нашел эту скрипку несколько месяцев назад, может быть полезной: http://jsfiddle.net/DbXQs/

person argentum47    schedule 21.05.2013