web-dev-qa-db-ja.com

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
cssheightwidthhide
12
josch
#top         { width: 300px; height:0px; max-height:0px; }
#top:hover   {height: auto; width: 300px; }

http://jsfiddle.net/G5cgY/

5
Axel Amthor

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/

1
argentum47