Question

我遇到了设置容器的响应宽度和高度的问题。

我需要在80％的屏幕上设置容器的高度和宽度，但这不起作用（我认为因为身体没有高度和宽度）。

这是一个例子：

<div id="container">
    <div class="box">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>
    <div class="box">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>
</div>

#container
{
    width:100px;
    height:100px;
    background-color:blue;
    padding:5px;
    margin-left:auto;
    margin-right:auto;
}

.box
{
    width:100%;
    height:50%;
    background-color:red;
}

.element
{
    width:22.5%;
    height:96%;
    margin:1%;
    background-color:yellow;
    float:left;
}

那是JSFIDDLE： https://jsfiddle.net/trsjc7cw/

非常感谢你的帮助！

Answer 1

#container {

  width: 80vw;

  height: 80vh;

  background-color: blue;

  padding: 5px;

  margin: auto;

}

.box {

  width: 100%;

  height: 50%;

  background-color: red;

}

.element {

  width: 22.5%;

  height: 96%;

  margin: 1%;

  background-color: yellow;

  float: left;

}

<div id="container">
  <div class="box">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="box">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

使用 vw和vh 单位！

Answer 2

您应该只需要git add path/to/file1 git add path/to/file2 git commit -m "changed file1 and file2"周围100个视图宽度和100个视图高度的包装。

<div>

您也可以使用身体作为包装。只需确保在css中将<div id="wrapper"> <div id="container"> <div class="box"> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> </div> <div class="box"> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> </div> </div> </div> #wrapper { height: 100vh; width: 100vw; } #container { height: 80%; width: 80%; }和<body>元素的高度和宽度设置为100％。

响应设置宽度和高度为80％

2 个答案: