Элементы исчезают, когда высота относительно

У меня есть 3 a с width:100%. Я не хочу устанавливать высоту, чтобы изображения сохраняли их соотношение. По неизвестной причине элементы a исчезают, если высота не указана или не установлена в auto. Любая идея, почему это происходит?Элементы исчезают, когда высота относительно

HTML:

<div class="cuerpo"> 
    <div class="articulosysidebar"> 
    <!--articulos--> 
    <div class="articulos"></div> 
    <!--sidebar--> 
    <div class="sidebar"></div> 
    </div> 
<!--botones redes sociales--> 
<div class="social"> 
    <a class="twitter" href="https://twitter.com/franlegon"></a> 
    <a class="facebook" href="https://www.facebook.com/franlegon"></a> 
    <a class="pinterest" href="http://www.pinterest.com/franlegon/"></a> 
</div> 
</div>

CSS:

body{height:2000px} 
/**/ 
.social { 
    height:100%; 
    width: 4.7%; 
} 
.social a { 
    height: 3vw;   /*HERE I WANT NOTHING*/ 
    width: 100%;   /*HERE I WANT 100%*/ 
    float:right; 
    display: block; 
} 

.twitter {background-image: url(http://ow.ly/IPVSe);} 
.facebook {background-image: url(http://ow.ly/IPVWg);} 
.pinterest {background-image: url(http://ow.ly/IPVGB);} 

/**/ 
.cuerpo { 
    width:100%; 
    height:100% 
} 

.articulosysidebar { 
    width:91%; 
    height:100%; 
    background:#DEDEEC; 
    margin-right:4%; 
    float:right; 
} 

/**/ 
.articulos { 
    width: 74%; 
    height:100%; 
    float: left; 
} 

/**/ 
.sidebar { 
    background: #165eac; 
    float:right; 
    width: 25%; 
    height:100%; 

}

также доступен здесь: http://jsfiddle.net/FranLegon/y7so6u10/

источник

2015-02-11 FranLegon

Это потому, что ваш a тег пуст. Если вы хотите, чтобы он расти с его содержанием, вам нужно дать ему некоторый контент (background - это не контент). Вы можете добавить изображение, которое хотите, с тегом img.

<a class="twitter"><img src="url(http://ow.ly/IPVSe)" alt="Twitter /></a>

И в файле .css:

.social a img { 
    width: 100%; 
}

источник

2015-02-11 18:10:03 cangoektas

Это моя рекомендация, а также. Обновленная скрипка здесь https://jsfiddle.net/fqzmn5rd/2/ –

@AnthonyTJRivas благодарит! но теперь 'img' имеет пустое пространство (выглядит как маржа, но это не так) я не могу избавиться. Любая идея, почему это происходит? – FranLegon

Хм. Не знаете, можете ли вы опубликовать скрипку? – cangoektas

Поскольку ваша ссылка тег пустой <a></a>, я предлагаю вам добавить:

<a class="twitter">Twitter</a>

И добавить ниже код, чтобы скрыть текст:

.twitter { 
    text-indent: -9999px; 
}

Изменено демо http://jsfiddle.net/y7so6u10/5/

источник

2015-02-11 17:56:01 Stickers

Элементы исчезают, когда высота относительно

ответ

Смежные вопросы