Question

我有一个简单的代码：

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8" /> 
        <style type="text/css">
            html{   
                background-color: red;
                height: 100%;
            }
            body {
                background-color: black;
                min-height: 50%;
                padding: 10px;
            }
            .wrap{
                width: 100%;
                height: 50%;
                background-color: green;
            }
        </style>        
    </head>
    <body>
        <div class="wrap">
            test
        </div>
    </body>
</html>

我希望将.wrap容器放到他父容器（body）的50％。但它不起作用...... 如果我将高度属性更改为ex。身高：150px;和css工作正常...... 我不明白为什么。

感谢您的回复！这只是考试，而不是真正的布局。我不明白为什么我不能用。％单位将.wrap容器包裹到100％的身体容器（黑色）。我认为响应式布局我必须使用％单位，而不是px或其他。此外，这有点不合逻辑的情况：）

Answer 1

尝试这样 DEMO

<强> CSS：

html {
    background-color: red;
    height: 100%;
}
body {
    background-color: black;
    height: 50%;
    padding: 10px;
}
.wrap {
    width: 100%;
    min-height: 50%;
    background-color: green;
}

Answer 2

将body样式更改为

body {
    height: 100%;
}

不要嵌入min-height＆amp; height彼此{{1}}，因为每个人都计算在其他人身上。

如果以嵌入父级容器中的容器的高度为百分比给出最小高度，则会出现矛盾。

1：对于父级的内部容器（100％），高度必须要计算，但由于父级没有特定的高度，因此无法确定要执行的操作。

2：父有min-height，但确定它的高度，它的子高度应该是konwn，在这种情况下不知道，因为它是指定了ho高度的父的100％。

由于父母和父母的两个案件身高。 child变为0（未定义），这在您的情况下发生。为了给任何div提供百分比高度时要避免这种情况，请确保它的父级具有固定的高度，否则整个计算都会出错。

Answer 3

在＆＃34; px＆＃34;中使用min-height;这将很好。你没有div中的内容，所以你必须使用像素的最小高度。

html{   
background-color: red;
height: 100%;
}
body {
background-color: black;
min-height: 50%;
padding: 10px;
}
.wrap{
width: 100%;
min-height: 200px; /*-- similar like this --*/
background-color: green;
}

Answer 4

HTML：

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8" /> 
        <style type="text/css">
            html{   
                background-color: red;
                height: 100%;
            }
            body {
                background-color: black;
                min-height: 50%;
                padding: 10px;
                height: 100%;
            }
            .wrap{
                width: 100%;
                height: 50%;
                background-color: green;
            }
        </style>        
    </head>
    <body>
        <div class="wrap">
            test
        </div>
    </body>
</html>

尝试此操作可以解决您的问题。

发生这种情况是因为如果你看到没有父容器的高度，那么我们必须给它一些高度。

我不能将<div>容器装到50％</div>

4 个答案: