Question

HTML

<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

CSS

body{
  height:100%
}
.left{
  float:left;
  background-color:#ccffcc;
  height:100%;
  width:50%;
}
.right{
  height:100%;
  width:50%;
  float:right;
  background-color:#ffcc99
}

我已经设置了父元素的高度

看到我的两个div，我该怎么做？

它似乎只在我使用像素时才起作用，但我不喜欢使用像素......

Answer 1

同时将height:100%添加到html

body, html{
height:100%
}

<强> DEMO

Answer 2

body,html{
height:100%
}

我只是单独编辑了这部分，即添加了html

Fiddle Demo

Answer 3

fiddle

添加：

body, html {
    height:100%
}

ALSO ... html的标记不正确，使用<html>

Answer 4

<html>
<head>
<title>Test HTML</title>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
<html>



<style>

body,html{
height:100%
}
.left
{
float:left;
background-color:#ccffcc;
height:100%;
width:50%;
}
.right
{
height:100%;
width:50%;
float:right;
background-color:#ffcc99
}
</style>

希望这有助于：）

Answer 5

<html>
    <body>


        <div class="left"></div>
        <div class="right"></div>

    </body>


    <style>

    body{
    `height:100%
    }
    .left
    {
    float:left;
    background-color:#ccffcc;
    height:100%;
    width:50%;
    }
    .right
    {
    height:100%;
    width:50%;
    float:right;
    background-color:#ffcc99
    }
    </style>
    </html>

Answer 6

如果您在此CSS中有任何问题。你也可以使用内联css <body style="height:100%"> 因为可能是它的css冲突问题。

<body style="height:100%">


        <div class="left"></div>
        <div class="right"></div>

    </body>


    <style>
    html{
       height:100%;        
   } 

    .left
    {
    float:left;
    background-color:#ccffcc;
    height:100%;
    width:50%;
    }
    .right
    {
    height:100%;
    width:50%;
    float:right;
    background-color:#ffcc99
    }
    </style>

更新了Fiddle

Div无法正常显示

6 个答案: