Question

我需要向我解释这一点。我以为我理解CSS;很明显，我没有一条血淋淋的线索。

＆＃13;

body {
    margin:0;
    padding:0;
}
#contain{
    position: relative;
    width: 100%
    height: 100%;
}
#wizard{
    position: absolute;
    left: 5%;
    width:10%;
    height: 100%;
    background-color: black;
}
#main{
    position: absolute;
    height: 100%;
    left: 15%;
    border-style: dashed;
    border-color: red;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <script>
            //css here, removed for purpose of the question
        </script>
    </head>
    <body>
        <div id="contain">
            <div id="wizard">
    
            </div>
            <div id="main">
            
            </div>
        </div>
    </body>
</html>

＆＃13;

这是CSS定位的最基本的例子之一，我之前已经多次使用过它。我知道这是＆＃34;不正确＆＃34;，但为什么？为什么我只看到一个红点（#main的浓缩，虚线边框）从左边15％，没有别的？

Answer 1

你从无到有继承100％的高度 - 所以百分之百都没有。我不知道你想要的效果究竟是什么，但你应该在某个地方设置一个高度。

Answer 2

将body和html的高度设置为100％，这将为您的其他元素提供参考。

您不需要为定位元素将高度设置为100％，只需将顶部和底部偏移设置为0.如果要使用height: 100%，可能会因为边框，您可以通过指定属性box-sizing: border-box来解决这个问题。

body {
  margin: 0;
  padding: 0;
}
body, html {
  height: 100%;
}
#contain {
  position: relative;
  width: 100%;
  height: 100%;
}
#wizard {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5%;
  width: 10%;
  background-color: black;
}
#main {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15%;
  right: 0;
  border-style: dashed;
  border-color: red;
}

<div id="contain">
  <div id="wizard"></div>
  <div id="main"></div>
</div>

Answer 3

这有时可以解决问题：

width:100vw;
height:100vh;

Answer 4

#contain div的高度根据其父元素计算其高度：html，body。要纠正您的身高问题，请明确将每个身高设置为100％。

绝对定位的#main div没有宽度，因此被表示为由3px虚线边框包围的零像素点，留下红色的6px正方形。

此jsfiddle将height: 100%添加到html＆amp; body和width: 5%至#main可使更改更加清晰。

http://jsfiddle.net/coreysan/49u3ygq1/4/

请注意，您在#contain width属性上缺少分号，这也会导致一些问题：）

Answer 5

尝试将“display：block”添加到主

为什么我的身高：100％的财产不起作用？

5 个答案: