Question

HTML code：

<div id="container>

<div id="wrapper">Some text
</div>

</div>

CSS代码：

div {

position:fixed;
display:block;
}

#container {
max-width:1500px;
height:10%;
}

#wrapper {
width:50%;
height:10%;
}

现在，我的包装和容器具有相同的大小，但您可以预期包装器是容器高度的一半，并且容器的高度的十分之一。不幸的是，他们现在都很大。有人可以帮帮我吗？

Answer 1

您需要在max-width上将width更改为#container以获得正确的宽度：

#container {
  width: 1500px;
  height: 10%;
}

您需要移除position: fixed并在html, body上设置高度才能获得高度百分比：

html, body {
  height: 100%;
}
div {
  position: fixed;
  display: block;
}

JSFiddle

（您还错过了容器div中的结尾"，但我认为这是一个错字）

Answer 2

#container {
    display:block;
    position:fixed;
    width:100%;
    height:10%;
    background-color: blue;
}

#wrapper {
    display:block;
    position:relative;
    width:50%;
    height:100%;
    background-color: red;
}

当我把一个DIV放在另一个DIV中时，它不会复制它的宽度和高度

2 个答案: