11

除算がheight: 100px;あり、その中にリンクが含まれている場合、値をハードコーディングせずに、除算の高さをリンクで埋めることはできますか？

<div><a href="#">hello</a></div>

div {
    height: 100px;
    width: 100px;
    background: red;
}

a {
    background: green;
    height: 100%; /* This does not work. Is it possible to set this height to 100% of container? */
}

フィドル： http： //jsfiddle.net/nPL65/

4

3 に答える 3

24

追加：

display: block;
height: 100%;

の幅にまたがるリンクを気にするかどうかはわかりませんが<div>

<a>に設定するだけの場合display: inline-block;

jsFiddle

于 2013-03-10T17:22:14.183 に答える
3

はい..表示をブロックに設定した場合にのみ可能です

div {
   width: 100px;
   height: 100px;
   background: red;
}

a{
    display: block;
    height:100%;
    background: green;
}

ご覧のとおり、背景は赤ではなく緑で塗りつぶされています。これは、高さが実際に設定されていることを示しています。

于 2013-03-10T17:28:05.827 に答える
2

ブロック要素は拡張してコンテナを埋めます。高さを100％に指定すると、親の高さまで増加します。

a {
    background: green;
    display: block;
    height: 100%;
}

実例：http： //jsfiddle.net/h42bD/

于 2013-03-10T17:22:31.760 に答える