Question

我正在创建一个自适应网页。我之前从未遇到过这个问题，但我似乎无法找到解决方案。我已经围绕3个其他div创建了一个包装div，但由于某种原因，3个包含div的内容不会显示，有人可以告诉我原因：

HTML

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">

    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <link rel="stylesheet" href="css/responsive.css" type="text/css" />

</head>

<body>

    <div class = "header">

        <div class = "logo">

        </div>

        <div class = "nav">

        </div>

        <div class = "search">

        </div>

    </div>

</body>


</html>

CSS

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
}

.header{

    height:20%;
    width:100%;

}

.logo{

    height:100%;
    width:100%;
    display:inline;
    background:blue;

}

.nav{

    height:100%;
    width:50%;
    display:inline;
    background:green;

}

.search{

    height:100%;
    width:30%;
    display:inline;
    background:orange;

}

Answer 1

一种解决方案是将显示更改为阻止并使用float：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.header {
    height:20%;
    width:100%;
}
.logo {
    height:100%;
    width:100%;
    display:block;/*Change to block*/
    background:blue;
    float: left;
}
.nav {
    height:100%;
    width:50%;
    display:block;/*Change to block*/
    background:green;
    float: left;
}
.search {
    height:100%;
    width:30%;
    display:block;/*Change to block*/
    background:orange;
    float: left;
}

<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
    <div class="search"></div>
</div>

另一个很容易使用display: inline-block：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.header {
    height:20%;
    width:100%;
}
.logo {
    height:100%;
    width:100%;
    display: inline-block;/*Change to inline-block*/
    background:blue;
}
.nav {
    height:100%;
    width:50%;
    display: inline-block;/*Change to inline-block*/
    background:green;
}
.search {
    height:100%;
    width:30%;
    display: inline-block;/*Change to inline-block*/
    background:orange;
}

<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
    <div class="search"></div>
</div>

两者都有效。

Answer 2

您的元素高度存在问题。如果您没有要引用的固定数字，则不能将百分比作为高度。

示例：

body { height: 500px; }

div的内包装div不会显示

2 个答案: