当高度是相对的时元素消失答案

【问题标题】：Elements disapear when height is relative当高度是相对的时元素消失
【发布时间】：2015-02-12 02:10:03
【问题描述】：

我有 3 个a 和width:100%。我不想设置高度以使图像保持比例。由于某些未知原因，如果未指定高度或将高度设置为自动，a 元素就会消失。知道为什么会这样吗？

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/

【问题讨论】：

标签： html css height width

【解决方案1】：

那是因为你的a 标签是空的。如果你想让它随着它的内容而增长，你需要给它一些内容（background 没有内容）。你可以在里面添加你想要的带有img标签的图片。

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

在你的 .css 文件中：

.social a img {
    width: 100%;
}

【讨论】：

这也是我的建议。在这里更新小提琴jsfiddle.net/fqzmn5rd/2
@AnthonyTJRivas 非常感谢！但现在imgs 有一个空白空间（看起来像一个边距，但不是）我无法摆脱。知道为什么会这样吗？
嗯。不知道你能发个小提琴吗？

【解决方案2】：

因为你的链接标签是空的<a></a>，建议你加：

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

并添加以下代码以隐藏文本：

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

更新了演示http://jsfiddle.net/y7so6u10/5/

【讨论】：