サイズ変更可能なカレンダーを作成する（html/css/jquery）

Question

私はこれをできる限り明確にしようとします！だからここに行く！

私はAdam ShawのjqueryプラグインfullCalendarを使って作業しています。 私が取り組んでいるプロジェクトの調整が少ししかありません。

目的：それは、ウィンドウ内の文書のスペースを埋め、ウィンドウのサイズが変更されたときに常に表示滞在することを意図しているように、窓との間のパディングの10pxのを残しながらfullcalendarのこの「バージョンは」（設定されていますの右の側のカレンダー自体、の下ののカレンダー）。または、文書の先頭に10個のパディングがあります。の下には、のカレンダーナビゲーションがあります。左側は正しいです。

問題：ジップに含まれている 'localendar.html'を読み込むと、すぐに問題が発生することがあります（これは画面の解像度によって異なる場合があります）。現在のところ、カレンダーはカレンダーナビゲーションの10px以下に固定されていません。 さらに、ブラウザウィンドウのサイズを変更すると、カレンダーの右下と下端に10ピクセルのパディングが維持されますが、カレンダーの上部は3つのカレンダー表示オプションすべてでは機能しません。 カレンダーでオーバーフローが発生してスクロールバーが表示されてはなりません。

カレンダーは、すべての側に10pxのパディングを維持する必要があります（カレンダーのナビゲーションの下には、左側が10px、上部が10pxです）。カレンダーが平均的なネットブックの解像度より小さくならないようにするための最小の高さと幅（その時点でスクロールバーを引き起こすオーバーフローが許容されます）。

- これらの行が役に立ちます。

localendar.html（70から92、104~124）
fullcalendar.css（139-142 [ビューfullcalendar.css）
fullcalendar.js（473から492 [ビューfullcalendar.js）

Answer 1

要素の位置属性をすべて 'absolute'に設定しています。何かを 'position：absolute'に設定すると、それは 'position：relative'に設定された最も近い親の中に絶対的に配置されます。また、一般的な文書フローから要素を削除します。上のマージンで起こっていることは、カレンダーがドキュメントフローから外れているため、カレンダーの上にあるコントロールと重なっていることです。 CSSから位置属性を削除する必要があります。

これは、HTMLページ自体にカレンダーのスタイルを持っているべきである：

div#calendar { 
    margin-left: 252px !important; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

それはルールに多くの重みを与えるので、私はスタイルプロパティでdiv要素を含めています。また、margin-leftプロパティの値を重要に設定するのは、fullcalendar.cssファイルで重要な別のスタイルが設定されているためです。これらの2つは、そのファイルに適用された左余白を上書きします。

私はこれまでSafariでこれをテストできましたが、ほとんどのブラウザで正しく動作するはずです。これが役に立ったら教えてください。