响应式将宽度和高度设置为 80%答案

【问题标题】：Responsive Set width and height to 80%响应式将宽度和高度设置为 80%
【发布时间】：2016-03-09 11:36:17
【问题描述】：

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

我需要在屏幕的 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/

非常感谢您的帮助！

【问题讨论】：

标签： html css height width

【解决方案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 单位！

【讨论】：

非常感谢，它工作得很好！我从来没有用过，所以我不知道这个，它非常有用！
谢谢你的链接，我已经检查过了，我认为没关系，因为我想把它放在一个带有phonegap的webview上，它适用于移动browser，只有旧的android版本不支持这个。你知道我该怎么做才能强制“元素”始终是方形的（相同的高度和宽度）？非常感谢

【解决方案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%;
}

你也可以用你的身体作为包装。只需确保在 css 中将 <body> 和 <html> 元素的高度和宽度设置为 100%。

【讨论】：

非常感谢您的回答，我该如何强制“元素”始终为正方形（相同的高度和宽度）？