-1

次の機能を備えたレイアウトを作成しようとしています。

  • 3流体カラム
  • 全高の列
  • ヘッダー
  • 固定フッター

ここで同様の質問を見つけました:ヘッダー、フッター、および複数の 100% 最小高さのコンテンツ列を含む CSS レイアウト

著者は、表ベースのレイアウトを使用して問題を解決しました。小さい画面で外側の列を簡単に非表示にできるように、可能であればテーブルの使用を避けたいと思います。

これまでに作成したコードは次のとおりです: http://cdpn.io/DqGfp

私のcodepenデモでわかるように、私はほとんどそこにいます。更新はすべての場合に正しいレイアウトを生成しますが、理想的にはサイズ変更時にもこれが発生する必要があります。

私が修正しようとしているサイズ変更のバグは次のとおりです。

  1. 背の高いウィンドウから短いウィンドウに移動すると、不要なスクロールバーが発生します。
  2. 幅の広いウィンドウから薄いウィンドウに移動すると、中央の列のコンテンツがフッターの下に入ります。

使ってみました

$(window).height()

それ以外の

$(document).height()

しかし、それはたくさんの新しいバグを引き起こします。

どんな助けでも大歓迎です！

4

3 に答える 3

0

だから私はそれを理解しました。ウィンドウのサイズが変更されたときに再計算する前に、強制された列の高さをすべてクリアする必要がありました。

私のソリューションに関する投稿へのリンクは次のとおりです。

助けてくれてありがとう。

于 2013-07-08T14:19:26.030 に答える
0

これを解決するには、次の 2 つの方法があります。

ウィンドウのサイズ変更中にjQuery関数のサイズ変更を使用して、再度作業を行います。

$(window).resize(function(){
     ////Write your code here again
})

または、css プロパティを使用して、DIV を下部に固定することもできます。

position:fixed; bottom:0; left:0; right:0; height:100px;
于 2013-07-05T12:04:11.893 に答える