浮点数：向左移动，高度百分比

Question

I'm currently trying to do this.

This is the code I got so far,

Html

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

Css for .home

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

And the height:25%; does not work. I found some fixes like adding position:absolute; but that messes up everything when resizing. I'm trying to find a work around to this and help would be much appreciated!

Answer 1

Try putting the elements inside a container div with an explicit height.

<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%;
}

Answer 2

Sorry I'm a bit late but I made this FIDDLE

Hope it can help you, here is the code:

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;
}