सीएसएस: तत्व छिपाते हैं, लेकिन चौड़ाई (और नहीं ऊंचाई) रखने

Question

• display:none पूरी तरह से एक तत्व छुपा देगा जैसे कि वह अब दूसरे हाथ पर एक चौड़ाई और शून्य
• visibility:hidden की ऊंचाई एक तत्व छिपाते हैं, लेकिन एक आयत को आरक्षित जाएगा था दस्तावेज़ में तत्व की मूल चौड़ाई और ऊंचाई का।

क्या शुद्ध सीएसएस के माध्यम से एक तत्व छिपाने के लिए कोई तरीका है जैसे कि यह शून्य ऊंचाई लेता है लेकिन इसकी मूल चौड़ाई? अपनी ऊंचाई शून्य पर सेट करना काम नहीं करता है क्योंकि मुझे पता नहीं है कि तत्व को सेट करने के लिए किस ऊंचाई को एक बार फिर से दिखाना है।

विशेष रूप से मैं निम्नलिखित हासिल करना चाहते हैं:

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

संपादित करें: हल! मूल ऊंचाई को पुनर्स्थापित करने के लिए height:auto सेट करना है।

पूर्ण संस्करण या यहाँ के लिए यहाँ http://jsfiddle.net/yP59s/ देखें सीएसएस:

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 

Answer 1

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

http://jsfiddle.net/G5cgY/

Answer 2

सीएसएस

<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> 

और सीएसएस

.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/