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

Question

我在为容器设置响应宽度和高度时遇到问题。

我需要在 80% 的屏幕上设置容器的高度和宽度，但这行不通（我想是因为 body 没有高度和宽度）。

这是一个示例代码：

<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

您只需要在 <div> 周围添加一个包装器，即 100 视图宽度和 100 视图高度。

<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 作为包装器。只需确保在 css.

中将 <body> 和 <html> 元素的高度和宽度设置为 100%

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

Responsive Set width and height to 80%

html

css

height

width