浮动：左边有％高度

Question

我目前正在尝试这样做。

这是我到目前为止的代码，

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;

高度：25％;不起作用。我找到了一些补救措施，比如添加位置：绝对; 但是在调整大小时会弄乱一切。我正试图找到一个解决这个问题的工作，非常感谢帮助！

Answer 1

尝试将元素放在具有显式高度的容器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%;
}

Answer 2

对不起，我有点迟了但我做了这个 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;
}