CSS - fitting 100% of parent's space? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.

---

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 3 years ago.

开发者_JS百科 Improve this question

I want to create a span inside of a link (a href) tag, I want the span to take 100% width & height of the parent link element. I've been trying with position relative/absolute but nothings works.

Example:

http://jsfiddle.net/dDZRj/

---

Is this it?

http://jsfiddle.net/dDZRj/11/

body {
    margin: 25px;
}

.button {
    margin: 5px;
    color: #fff;
    background: #999;
    display: inline-block;
    padding: 10px 0;
    text-decoration: none
}   

.button span {
    padding: 10px;
    border: solid 1px red;
    width: 100%;
}

.big {
    font-size: 2em;
}

---

Tested in Chrome.

http://jsfiddle.net/loktar/dDZRj/4/

CSS

body {
    margin: 25px;
}

.button {
    margin: 5px;
    color: #fff;
    background: #999;  
}   

.button span {
    border: solid 1px red;
}

.big {
    font-size: 2em;
}

Markup

<a href="#" class="button"><span>Click me!</span></a>

<a href="#" class="button big">
    <span>Click me!</span></a>

<a href="#" class="button">
    <span>Click me!</span>
</a>

---

In Firefox at least you need to change our source to:

<a href="#" class="button">
    <span>Click me!</span></a>

<a href="#" class="button big">
    <span>Click me!</span></a>

<a href="#" class="button">
    <span>Click me!</span></a>

But otherwise @Loktar's CSS works great :)

---

Try changing the span:

display: block;

---

I think this is what you are after, the a can have any size in width and the span will adjust its size to match. Oh and there is padding.

http://jsfiddle.net/dDZRj/12/