Поплавок: слева% высота

Question

В настоящее время я пытаюсь это сделать.

Это код, который я получил до сих пор,

Html

<a class="home" href="home.php"> 
    <i id="icon" class="fa fa-home"></i> 
    <p id="tag">Home</p> 
</a> 

Css для .home

width: 25%; 
height: 25%; 
overflow: hidden; 
float: left; 
background: #ea7b7b; 
color: #fff;  
text-decoration: none; 

и высота: 25%; не работает. Я нашел некоторые исправления, такие как добавление позиции: absolute; , но это все испортит при изменении размера. Я пытаюсь найти работу с этим, и помощь будет очень признательна!

Answer 1

К сожалению я немного поздний, но я сделал это FIDDLE

Надеется, что это может помочь вам, вот код:

HTML:

<div id="top"></div> 
<div id="content"> 
    <div class="box"> 
     <a class="home" href="home.php"> 
      <i id="icon" class="fa fa-home"></i> 
      <p id="tag">Home</p> 
     </a> 
    </div> 
    <div class="box"></div> 
    ... 
</div> 
<div id="bottom"></div> 

CSS:

html, body { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
#top, #bottom { 
    position:absolute; 
    height:80px; 
    width:100%; 
    background:grey; 
    left:0; 
} 
#top { 
    top:0; 
} 
#bottom { 
    bottom:0; 
} 
#content { 
    position:absolute; 
    top:80px; 
    left:0; 
    right:0; 
    bottom:80px; 
} 
.box { 
    box-sizing:border-box; 
    border:1px solid red; 
    float:left; 
    width:25%; 
    height:50%; 
} 
.home { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
    overflow: hidden; 
    float: left; 
    background: #ea7b7b; 
    color: #fff; 
    text-decoration: none; 
} 

Answer 2

Попробуйте поместить элементы внутри контейнера div с явной высотой.

<div class="header"></div> 
<div class="container"> 
     <a class="home" href="home.php"> 
      <i id="icon" class="fa fa-home"></i> 
      <p id="tag">Home</p> 
     </a> 
     <a class="contact" href="contact.php"> 
      <i id="icon" class="fa fa-home"></i> 
      <p id="tag">Contact</p> 
     </a> 
</div> 
<div class="footer"></div> 

CSS

.header, .footer 
{ 
    height: 50px; 
    background: black; 
} 

.home 
{  
    background: #ea7b7b;  
} 

.container > a 
{ 
    width: 25%; 
    height: 50%; 
    overflow: hidden; 
    float: left; 
    color: #fff; 
    text-decoration: none;   
} 

.container 
{ 
    height: 600px; 
    width: 100%; 
}