CODEWITHSUNDEEP
htmlcss
Jakub Kotrs
Jakub Kotrs

Reputation: 6201

100% height of absolutely positioned element

I'm trying to set up an anchor that would automatically stretch to match the dimensions of an image that is used as a background. Also, the anchor's text needs to be both horizontally and vertically centered. Here's my current HTML markup:

<div class="wrap">
    <img src="http://placehold.it/350x150">
    <a href="#">
        <span>Anchor</span>
    </a>
</div>

The idea is that my .wrap is a fluid column of a grid, so the image stretches to match the width and height is given by the image's ratio. The anchor is displayed as a table for vertical alignmenet and the span has a background visible on hover over the anchor. There is my CSS:

* {
    box-sizing: border-box;
}

body {
    height: 100%;    
}

.wrap {
    height: auto;
    margin: 2em;
    overflow: hidden;
    padding: 1em;
    position: relative;
    width: 80%;
}

.wrap img {
    width: 100%;
}

.wrap a {
    display: table;
    height: 100%;
    left: 1em;
    padding: 1em;
    position: absolute;
    text-align: center;
    top: 1em;
    width: 100%;    
}

.wrap a span {
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;    
}

.wrap a:hover span {
    background: red;    
}

The problem I have is the height of the anchor, it refuses to fill the container. Here you have a fiddle: http://jsfiddle.net/xuxG5/3/

I tried looking into other questions around here but unfortunately none of them matched my problem - it's a combination of 100% height table in a fluid parent height but the most common answer was to set height of the parent and the absolute position doesn't make it any simpler.

Question edited to show the anchor's text doesn't always have just one line of text

I was hoping you could help me if there is a CSS solution, otherwise I will use a simple JS script.

Upvotes: 0

Views: 93

Answers (1)

David
David

Reputation: 4361

This should make the A fill the box - http://jsfiddle.net/xuxG5/5/

.wrap a {
    display: block;
    left: 2em;
    right: 2em;
    bottom: 2em;
    top: 2em;
    position: absolute;
    text-align: center;  
    border: 1px solid red;
}

.wrap a span {
    position: absolute;
    top: 50%;
    margin-top: -1em;
    line-height: 2em;
    width: 100%;
    display: block;
}

Upvotes: 1

Related Questions