CSS - How do I get my list element to fill 100% of the block


Tags: html,css

Problem :

I want to use different sizes of list blocks.

In the 'Result' section of JSFiddle, the user can only select the "Working" list entry if he hovers near the top of the block (where the text is located). If the user hovers below the text, it does not work. I want the user to be able to hover over any portion of this block.

I have placed my code here

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

Any help that you can provide is appreciated.
Thanks, Susan.

<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>  


Solution :

try this

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

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

I have made height of anchor tag equals to 100% of it's parents li


    CSS Howto..

    D3 Line Chart Show/Hide Element, Variable Not Defined Error?

    How to solve position issue in ie7 using html and css?

    How to Change a Plugin's CSS

    How do i add and remove an active class with jQuery?

    How to make simple_form input field wider with CSS?

    How to change css file of bx-slider, multiple sliders on a page [closed]

    How to make element fade in on page scroll?

    Slide Up on Services Pages & Slider Not Working/Showing

    How to create column with two divs one fixed above second that hides behind first when scrolling?

    How to reduce the height of a button with CSS?

    How to generate a elongated hexagon shape with two circular sides?

    How to fit height of aside to body height

    How do I set the style of children using css modules in a reactjs project using classNames and JSX

    How to display Bootstrap button label vertically using CSS?

    how to make unorder list all in same block and have gap within each link (CSS)

    How to dynamically create CSS class in JavaScript and apply?

    How to do line animation using CSS and SVG

    How to select only for the first of divs with equal names?

    How to show ellipsis for long cell values in kendo ui grid?

    How can I create the shape of side mirrors of a truck/lorry?

    How to make header background 100% height?

    How does chrome extend the search window beyond the browser window

    How to show/hide content on click with CSS

    How to make CSS visible only for Android phone UC browser

    How do I align the list items in an
      with my

      ?

    How to apply css inside a text that is either any html control or without any html control

    how to make text transparent without changing to an image using css

    How to fire a new css animation when the element already has one?

    layout - show the latter coded div at top without absolute positioning

    css - how to fix first td in table on top if the second td has multiline?