1

私はこれに似たセットアップを持っています: http://codepen.io/anon/pen/iAJnxメインコンテンツはかなり長いです。私がやりたいことは、このスクリーンショットのように、画面の表示部分に境界線を付けることです: http://i.imgur.com/ENtLau4.png

私がやりたいのは、画面の端に配置される 4 つの div を作成することですが、配置とコンテンツなしで div の高さと幅の両方に苦労しています。誰かがこれについて考えを持っていますか?

注: オーバーレイを使用してみましたが、コンテンツをクリックできなくなります。

4

2 に答える 2

2

これを試して：

HTML:

<div class="border-box"></div>

CSS:

body { position: relative; }

.border-box {
  border: 5px solid blue;
  box-shadow: 0 0 100px 100px #fff;
  position: fixed;
  pointer-events: none;
  bottom: 10px;
  left: 10px;
  right: 10px;
  top: 10px;
}

仕組み:
上、下、左、右の定義を使用して、画面の端を固定する境界線付きのオーバーレイを絶対に配置しました。以下のコンテンツを選択可能にするpointer-events: none;には、オーバーレイに設定します。

例: http://codepen.io/anon/pen/BxJbh

HTML マークアップを追加せずに同じ結果を得たい場合は、:beforesudo セレクターを使用して本文の前にブロックを追加できます。この CSS を追加するだけで、同じ結果が得られます。

body:before {
  border: 5px solid blue;
  box-shadow: 0 0 100px 100px #fff;
  display: block;
  content: '';
  position: fixed;
  pointer-events: none;
  bottom: 10px;
  left: 10px;
  right: 10px;
  top: 10px;
}

例: http://codepen.io/anon/pen/BDhql

于 2013-09-13T15:21:03.440 に答える
1

コンテンツ ID ( #content )を設定する必要があります

border:4px solid blue;
min-width:700px; //それに応じて変更します。
min-height:1600px//それに応じて変更


上記のコードは、コンテンツを持たずに設定したい高さと幅だけでなく、境界線の問題も修正します。

于 2013-09-13T15:34:02.467 に答える