0

SMF フォーラム ソフトウェアの 2 列 (サイドバー) レスポンシブ テーマを作成しようとしています。親の高さを 100% 拡張する列を右側に貼り付けたかったのです。

参考までに、デフォルトのテーマをレスポンシブ テーマに変換し始めました。

通常、これらの問題やレスポンシブ デザインに問題はありません。ただし、サイドバーの高さがヘッダーの高さと一致し続ける理由がわかりません。

サイドバー HTML は、ヘッダー HTML の外側で、その前にあります。それでも、inspect 要素を介してサイドバーに 400px の固定幅を指定すると、ヘッダーの高さも拡張されます。コード側では意味がないように見えるので、私はこれに困惑しています。

別の目があれば、誰かがこれを理解するのを手伝ってくれると思いました.

http://xarcms.com/index.php?theme=3

ありがとう。

4

2 に答える 2

1

私が見る主なことは、間違った要素をスタイリングしていることです。<aside>サイドバーがフローティングされておらず、サイズが宣言されていない でラップされています。したがって、スタイルを設定したサイドバー コンテンツは 100% に拡張され、<aside>それ自体がコンテンツのサイズに縮小されます。<aside>より正しく動作させるには、スタイルを に変更する必要があります。

それ以外には、現時点では他に多くのことはありませんが、上記の内容から始めることができます。そこから、CSS をダブルチェックして、いずれかのスタイルの範囲が広すぎないことを確認します。また、HTML 構造を調べて、絶対に必要なものだけを入れ子にしていることを確認することもできます。それでも問題が解決しない場合は、より簡単に解決できるように、問題が解決されていない縮小バージョンを入手できるかどうかを確認してください。

于 2012-12-04T15:57:58.307 に答える
1

この問題を解決するために、 と の領域を div コンテナーの外に配置しました。これにより、4 つの不要な div (主にラッパー) を削除できました。というわけで大雑把に言うと…

これに切り替え:

<div width wrapper>
<header></header>
<aside floated></aside>
<section></section>
<footer></footer>
</div>

それよりも：

<div width wrapper>
<section>
<header></header>
<aside floated></aside>
<div></div>
<footer></footer>
</section>
</div>

これはよりクリーンで、より理にかなっているように見えました。

于 2012-12-05T19:32:00.240 に答える