CSS - 如何讓我的列表元素填充塊的100％

Question

我想使用不同大小的列表塊。

在JSFiddle的'Result'部分中，如果用戶在塊的頂部附近（文本所在的位置）懸停，用戶只能選擇「Working」列表條目。如果用戶在文本下方懸停，則不起作用。我希望用戶能夠懸停在此塊的任何部分。

我已經把這裏

JSFiddle http://jsfiddle.net/susan/5kDHS/3/

任何幫助，您可以提供理解我的代碼。
謝謝，蘇珊。

<div id="mainblock"><b>My Day</b> 
    <ul id="blocks"> 
     <li id="timework"><a href="http://www.google.com">Working 75% </a> 
     </li> 
     <li id="timeplay"><a href="http://espn.go.com/">Playing 25%</a> 
     </li> 
    </ul> 
</div> 

Answer 1

試試這個

#blocks li a 
{ 
    ....... 
    height: 100%; 
} 

http://jsfiddle.net/5kDHS/8/

我已經做錨標記的高度等於它的父母立的100％

Answer 2

只需添加height: 100%;到#blocks li a。小提琴：http://jsfiddle.net/5kDHS/6/

Answer 3

如果你想保持錨填充，你可以嘗試使用CSS計算。

#blocks li a 
{ 
    background-color: #CCCCCC; 
    border-bottom: 1px solid #AAAAAA; 
    color: #333333; 
    display: block; 
    padding: 10px; 
    height: calc(100% - 20px); /* <----- added this */ 
    text-align: left; 
    text-decoration: none; 
} 

這允許錨點填充容器，但也減去填充量。如果你只是使用「身高：100％」;由於填充，你會發現錨點超過了它們的容器。

Updated Fiddle（僅在瀏覽器測試）

比這其他可能需要內部的錨定件的附加跨度以產生所需的填充。