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

Question

我有 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/

Answer 1

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

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

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

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

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

Answer 2

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

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

并且在您的 .css 文件中：

.social a img {
    width: 100%;
}

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

Elements disapear when height is relative

html

css

height

width