配置に関係なくすべてのHTML要素を押し出す

私は、アプリケーションのウィジェットをサイトの下部に挿入するアプリケーションに取り組んでいます。私たちはウィジェットの位置が固定されているようにしました。下部には0がありました。あなたがサイト上のどこにいてもウィジェットは存続します。つまり、ビューポートの下部にあります。問題は、ウィジェットがサイトの下部にある要素をカバーしていることです。配置に関係なくすべてのHTML要素を押し出す

コンテンツの位置（例：位置と浮動小数点のプロパティ）に関係なく、サイトのコンテンツをプッシュできる方法はありますか？ウィジェットの「位置：固定」のため、通常のレイアウトから外れるので、マージンやパディングトップを置くことは何もしません。

ウィジェット自体の前にdivを追加するという一時的な解決策を試してみました。これはウィジェットの高さです。そのため、すべてを上げたり外したりしています。しかし、サイト自体にフローティングまたはボトムの要素がある場合、それらはいずれにしても覆い隠されます。

更新：すべての回答ありがとうございます。結局のところ、サイト固有のように見えるので、この作業をあきらめてしまいました。このウィジェットは、<script>を介してどのサイトにも埋め込まれています。私はあらかじめそれを言っておくべきだったと思います。

更新2：最終回答が解決しました。

出典

2009-05-05 curagea

：

$('html').height($(document).height() + numerical_height_of_your_widget);

これは、基本的にhtmlタグの高さは、jQueryの魔法の$（文書）.heightを介してコンテンツの高さの合計（（）と高さに設定し、 の位置：固定の要素（この場合はウィジェット）

出典

2009-07-22 02:50:38 avk

私は様々なレイアウトでそれをうまくテストしました： http://www.cssplay.co.uk/layouts/three-column-layouts.html http://www.intensivstation.ch/en/templates/ http ：//www.opensourcetemplates.org/ – avk

<body>タグの一番下にウィジェットを挿入しようとしましたか？それはページの一番下にあり、位置にする必要はありません。固定されています。それは通常の流れに従うので、内容をカバーしません。

出典

2009-05-05 23:20:52

これは、あなたがページにいてもウィジェットを永続させたいからです。私がページの一番上にいるなら、ウィジェットを同時に見たいと思う。 – curagea

私は見る。これはトリッキーな状況です！ JavaScriptは実行可能なソリューションですか？エレガントなJavaScriptソリューションであっても、要素を邪魔にならないようにすることは難しいでしょう。 –

位置の高さに等しいパディングボトムをボディに追加することもできます（固定要素）。

出典

2009-05-05 23:23:42 gnarf

あなたのwidedアブソリュートの位置を続けて使用し、コンテンツのdivを入れ、あなたのwidgetの高さと同じかそれ以上のマージンを追加する必要があります。

それはうまくいくと思います。

出典

2009-05-05 23:23:57

は、ページの高さを実行し、空のマージンを作成します。

<style> 
#content {width: 80%; 
      margin-left: 18%; /* to create a gutter between content and widget 
           and to allow for borders and such */ 
} 

#widget {width: 18%; 
     position: fixed; 
     bottom: 0; 
     left: 0; 
     padding: 0.5%; 
     border-top: 1px solid #ccc; 
     border-right: 1px solid #ccc; 
} 

</style> 

... 

<div id="content"> 

    <p>All of the branding, headers and content goes in this wrapper div.</p> 

</div> 

<div id="widget"> 

    <p>Widget goes here.</p> 

</div> 

...

は、私が思うに、動作するはずです。主に、ウィジェットが挿入される列が作成されるためです。注意：小さな画面を許可する必要があるため、ウィジェットがプッシュダウンされないようにする方法や、少なくとも優雅な推奨を受け入れる方法を作成する必要があります。 jQueryので

出典

2009-05-06 00:02:12

コードは、ウィジェットをコンテンツの横に配置するように見えますが、下に配置するのではありません。また、私たちはサイトそのものを管理することはできません。ウィジェットは、人々が自分のサイトに挿入できるものです。 – curagea

配置に関係なくすべてのHTML要素を押し出す

答えて

関連する問題