18

このようにページ全体を覆う縦線を作成したい

ここに画像の説明を入力

ここに私のコードがあります

#menu
{
border-left: 1px solid black;
height: 100%;
}

このような結果表示 ここに画像の説明を入力

4

8 に答える 8

27

絶対配置の疑似要素を使用します。

ul:after {
  content: '';
  width: 0;
  height: 100%;
  position: absolute;
  border: 1px solid black;
  top: 0;
  left: 100px;
}

デモ

于 2012-11-04T18:18:25.300 に答える
9

bookcasey が言っheight: 100%;たように、 DIV をその親の 100% にするだけです。このためhtml, body {height: 100%; min-height: 100%}、Marko が述べたように行う必要がありますが、のすべての親 DIV にも同じ変更を加える必要があり#menuます。

下の境界線があるため、右の境界線を親 DIV にheight: 100%;適用し、下の境界#menu線を表示する任意の高さで下の境界線を適用します。

于 2012-11-04T18:19:18.170 に答える
5

これを解決するには、少なくとも 2 つの方法があります。

解決策 1:

絶対配置要素を使用しても問題ない場合は、 の代わりに プロパティtopとプロパティを使用できます。と の両方を設定することで、要素が全高を占めるようになります。bottomheighttopbottom0

#menu
{
    position: absolute;
    border-right: 1px solid black;
    top: 0;
    bottom: 0;
}​

デモ

解決策 2:

もう 1 つの方法は、HTML 要素と BODY 要素を 100% の高さに強制して、100% の高さのメニュー用のスペースを確保することです。

body, html { height: 100%; }
#menu
{
    border-right: 1px solid black;
    height: 100%;
}​

デモ

于 2012-11-04T18:18:23.720 に答える
1

100% の高さは、親コンテナーの高さを指します。div が本体の高さいっぱいになるようにするには、次のように設定する必要があります。

html, body {height: 100%; min-height: 100%}

それが役に立てば幸い。

于 2012-11-04T18:17:04.727 に答える
0 
<!DOCTYPE html>
<html>
<title>Welcome</title>
<style type="text/css">
    .head1 {
        width:300px;
        border-right:1px solid #333;
        float:left;
        height:500px;
    }
   .head2 {
       float:left;
       padding-left:100PX;
       padding-top:10PX;
   }
</style>
<body>
   <h1 class="head1">Ramya</h1>
   <h2 class="head2">Reddy</h2>
</body>
</html>
于 2016-01-20T20:09:02.173 に答える
0

私は、ほとんどの垂直要素にこの CSS ポジショニングを使用しています。

<div class="vertical-line" style="height: 250px;
width: 1px;
background-color: #81F781;
margin-left: 0px;
margin-top: -100px;
postion: absolute;
border-radius: 2px;">
</div>

ページに合わせて高さと幅を変更するか、水平線を高さと幅に入れ替えます。

<div class="vertical-line" style="height: 250px;
width: 1px;

<div class="vertical-line" style="width: 250px;
height: 1px;

標準の html 行の代わりに。

于 2014-11-04T18:31:34.427 に答える