Как сделать дочерний элемент div = ростом родителя с отображением: встроенный блок и неопределенная высота?

Question

Я должен отделить фон кнопки от родителя по причинам, связанным с особенностями настройки Tumblr.

Вот HTML:

<a href="link">
    <div class="innerNest"> //I'm guessing we need this to bring the two divs to T:0 L:0
        <div class="buttonText">{tumblr variable}</div>
        <div class="buttonBG"></div>
    </div>
</a>

Это css, с которым я застрял, хотя бы для тега :

a{
    display: inline-block;
}

Я сделал очень описательный jsfiddle здесь: http://jsfiddle.net/hVuaf/35/

NB. Нетрудно просто так поступить, например (встроенный CSS для демонстрационных целей):

<a href="link" style="background-color:#fff;display:inline-block">Link</a>

Но я просто не могу, это связано с тем, что я хочу контролировать переменные назначенные цвета в пользовательских панелях редактирования тем Tumblrs. В основном он поддерживает цвета для холмов, но мне нужно работать с rgba, а не с #, поэтому мне нужно разделить компоненты кнопки.

Спасибо.

Answer 1

Это то, что вам нужно?

http://jsfiddle.net/cdj2L/

По сути, я установил привязку в положение: относительное, а затем текст внутри просто стандартный.Тогда заданный мной абсолютный фон и ширина / высота равны 100%, заполняя якорь.Наконец, z-index сортирует слои.

Надеюсь, это поможет:)

Answer 2

Это то, что вы ищете? Я удалил элемент bg и просто использовал контейнер для установки фона.

<a href="link">
    <div class="inlineNest">
        <div class="btText">Link</div>
    </div>
</a>

.inlineNest {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(255,0,0,0.5);
}

.btText {
    padding: 5px;
}

http://jsfiddle.net/mrtsherman/hVuaf/43/

Answer 3

Можете ли вы сделать это: http://jsfiddle.net/hVuaf/45/