ブラウザ右下に常に文章やBOX(div)を表示する コピペで使えるHTML+CSS

スポンサーリンク
スポンサーリンク

ブラウザ右下に常に文章やBOX(div)を表示する

表示サンプル

画面右下に表示されてます。PCでご確認ください。

困ったことがあったとき

お問合せはこちらから

コードの説明

  • 320px、240pxのdivを常に右下に表示させます。
  • 枠を1pxの黒色、backgroundを白に指定します。

HTML

<div class="fixed-div">
<p>困ったことがあったとき</p>
<p>お問合せはこちらから</p>
</div>

CSS

  .fixed-div {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 320px;
    height: 240px;
    overflow: auto;
    border:1px solid #444444;
    background-color:#EEEEEE;
  }

仕組みの説明

  • position:fixedとすることで、祖先要素について絶対配置されます。
  • 下から0、右から0の位置、つまり右下に表示されます。
  • overflowをautoとすることで、div内部の文字数が多くはみ出た場合にスクロールバーが表示されます。
スポンサーリンク