1

Web サイトの上部に水平位置を作成しようとしています。固定線です。レイアウトは縦 2 列です。左側は固定メニュー バー、右側はスクロール コンテンツです。横の固定線は、スクロールするコンテンツの上部を横切ります。

これらの列を次のように分割する垂直線を作成しました。

HTML:

<div id="vline"></div>

CSS:

#vline {
    min-width: 1px;         /* thickness of line */
    width: 1px;         /* thickness of line */
    height: 300px;          /* length of line (down) */
    background-color: #959595;  /* Line color */
    margin-left: 205px;     /* locating on page */
    position: fixed;        /* fix to window */
    }

しかし、水平線に position:fixed を追加すると、消えてしまいます。明らかに、通常のフローのままにしておくか、他の手段 (絶対的または相対的) で配置しようとすると、残りのスクロール コンテンツと共にスクロールします。線に問題があるのではないかと思ったので、次のように境界線を定義してみました。

HTML:

<div id="hline"></div>

CSS:

    #hline {
    border-top: 1px solid #959595;
    width: auto;            /* width match window size */
    margin-left: 205px;     /* locating on page */
    margin-bottom: 5px;     /* offset for text content bellow */
    position: fixed;
}

これには、回線を使用するのと同じ問題があります。それは正常に動作し、行はスクロール列の上部にある必要な場所に表示されますが、 position:fixed を追加するまで、もちろんコンテンツとともにスクロールします。position:fixed を追加するとすぐに消えます。

明らかに間違ったことをしている場合や、試したことのない別の配置方法がない限り、私が考えることができる唯一のことは、それがブラウザーのレンダリングのバグであるということです。Google Chrome の最新バージョンを使用しています。

ご協力いただきありがとうございます！

4

1 に答える 1

0

上と左を使用してバーを配置します。例えば、

 #hline, #vline{top: 0; left: 0;}

それはそれを行う必要があります。いくつかの小さな幅の問題があるかもしれません。px をハードコーディングするのではなく、すべてを % で行うことをお勧めします。

于 2013-08-04T23:17:11.730 に答える