私は、Googleのマテリアルデザイン(つまりカードの大量使用)に基づいてクライアント用のウェブサイトを開発しています。divを画面のサイズに関係なく同じ位置に表示する
私が望むのは、ページの最初のカードを、下の画像のようなフローティングアクションボタンの半分の点で画面のすぐ上に常に覗かせることです。
私の問題は、サイトが画面解像度と異なるデバイス上で表示されているときに、これはうまく動作しないということです。私はパーセンテージを使用しようとしましたが、このカードを上から埋めていますが、これらは失敗し、カードの位置が変わります。私の残りの選択肢は、メディアクエリを使用することですが、これは潜在的に複雑であることが判明します。それが現在存在しているとして、次の
は、カードのCSSです:私は望ましい効果を達成できるかに#content-card
{
position: relative;
display: table;
background-color: white;
top: 0;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
z-index: 2;
height: auto;
}
何かアドバイスや洞察力は大歓迎です。要求されたよう
感謝:)
基本jfiddleの実装: - https://jsfiddle.net/7fudv084/1/
あなたには、いくつかのjsfiddleを提供することができますか? – Sagar
[https://jsfiddle.net/dyxeaa18/]このようなものを探していますか?可能であれば、あなたの写真のような関連するHTMLとCSSを与えてください。 –
あなたはvhとvwのユニットを試しましたか? http://www.quirksmode.org/css/units-values/viewport.html – fredrover