當高度相對時元素消失

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

來源

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/ – 2015-02-11 18:39:17

@AnthonyTJRivas非常感謝！但現在'img's有一個空白區域（看起來像一個邊緣，但它不是）我不能擺脫。任何想法爲什麼發生這種情況 – FranLegon 2015-02-12 14:26:03

嗯。不知道你可以發表小提琴嗎？ – cangoektas 2015-02-13 22:35:40

因爲你的鏈接標籤是空<a></a>，我建議你補充：

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

並添加下面的代碼隱藏文本：

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

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

來源

2015-02-11 17:56:01 Stickers

當高度相對時元素消失

回答

相關問題