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
Просто задайте височина: автоматично, когато искате да „възстановите“ височината.   -  person powerbuoy    schedule 22.05.2013
comment
Не бих препоръчал да използвате top като идентификатор на елемент, това е запазена дума.   -  person Axel Amthor    schedule 22.05.2013
comment
Това всъщност не отговаря на въпроса ви, но може да искате да използвате малка височина (напр. 1px или 2px) вместо 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="/bg#box1">Show Box 1</a>|<a href="/bg#box2">Show Box 2</a>|<a href="/bg#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