float 3カラムの折りたたみによるCSSの不具合
リニューアルで Mozzila 系のブラウザに中央カラムのコンテンツ折りたたみを導入しなかった理由です。
Netscape または Firefox で、サイドバー(左右どちらでも良い)の表示が中央カラムより長い状態で、中央カラムの記事の折りたたみ(閉じる→開く)を行うと、開いた分の長さをサイドバーの余白として継承してしまいます。つまり記事を開いた途端にページ全体が下にのびてしまいます。中央カラムがサイドバーより長い状態であれば発生しません。
言葉で説明するのは難しいのでもぬけのからの個別エントリーアーカイブで試して頂けると一目瞭然です。このページでどちらかのサイドバーの長さを中央カラムより長い状態にして「続きを読む」をクリックすると、長いほうのサイドバーの下に余白が生じます。この余白は中央カラムを開いた分の長さと等しくなります。
またその後でサイドバーを折りたたんでも高さは変わりません。
かなり試してみましたが、今のところ解決策はみつかっておりません。そういう訳で継続調査中です。もし解決策をご存知の方がいらっしゃいましたらご教示頂ければ幸いです。
Posted by yujiro このページの先頭に戻る
- YouTube動画にキャプションをつけてテキストを回り込ませる方法
- 画像を下揃えにしてテキストを回り込ませる方法
- style要素にCSSの擬似要素は記述可能か?
- position:relativeを設定すると他の要素がずれる場合の対処
- CSSでタブ切り替えする方法
- :target擬似クラスのまとめ
- CSSでヘッダを固定したスクロールテーブルを作る方法
- レスポンシブウェブデザインで画像を縮小する方法
- disabledなボタンのhoverのスタイルを無効にする方法
- HTML要素を別の要素を基点にしてCSSで絶対配置する方法
- :not擬似クラスでCSS3のサポートをチェックする方法
- :checked擬似クラスでチェックボックスに連動して要素を表示させる方法
- ol要素の入れ子で親の番号を子に割り当てる方法
- チェックボックスやラジオボタンを大きくする方法
- CSSで中央に配置する方法
トラックバックURL
コメントする
greeting