屏幕的 100% 高度和宽度 [重复]答案

【问题标题】：100% height and width of screen [duplicate]屏幕的 100% 高度和宽度 [重复]
【发布时间】：2015-09-10 06:03:20
【问题描述】：

我的模板像这样我想为每个 div 设置适当的高度和屏幕，如果用户在小屏幕中打开此页面，而不是我不想更改我的 html 的结果，那么我应该在我的 css 中进行什么更改每个屏幕的正确输出。

{block name="head"}
<link rel="stylesheet" href="css/screen.css">
<style>
div{
border: 1px solid gray;
magin : 0 auto;
}
.main{
  width:100%; 
  height:100%;  
  margin :0;
  padding: 0;
  border: 1px solid gray;
}
.left{
  width:300px; 
  height:300px;
  margin : 0 px;
  float:left;
}
.order{
  width:300px; 
  height:300px;
}
.csscalc{ 
  width:300px;
}
.table{
  margin-bottom:
}
.item{
margin-left:300px;
}
</style>
{/block}
{block name="body"}
<form>
<a href="index.php" style="font-size:20px; text-decoration:none;">Home</a>
<div class="main">
  <!--left Div Start -->
  <div class="left">
     <div class="order">

     </div>
     <div class="csscalc">
      <input type="submit" value="1" name="qty" class="calc">
      <input type="submit" value="2" name="qty" class="calc">
      <input type="submit" value="3" name="qty" class="calc">
      <input type="submit" value="4" name="qty" class="calc">
      <input type="submit" value="5" name="qty" class="calc">
      <input type="submit" value="6" name="qty" class="calc">
      <input type="submit" value="7" name="qty" class="calc">
      <input type="submit" value="8" name="qty" class="calc">
      <input type="submit" value="9" name="qty" class="calc">
      <input type="submit" value="10" name="qty" class="calc">
      <input type="submit" value="250" name="qty" class="calc">
      <input type="submit" value="500" name="qty" class="calc">
      <input type="submit" value="750" name="qty" class="calc">
      <input type="submit" value="1000" name="qty" class="calc">
     </div>
     <div class="table">
       {section name="sec1" loop=$tableArray}
         <input type="submit" class="in" value="{$tableArray[sec1].ordertableNm}" name="ordertableId">
       {/section}
       {section name="sec2" loop=$outArray}
         <input type="submit" class="out" value="{$outArray[sec2].ordertableNm}" name="ordertableId">
       {/section}
     </div>
  </div>
  <!--left Div End -->
  <div class="item">
    {section name="sec" loop=$itemArray}
        <input type="submit" class="btn" value="{$itemArray[sec].itemNm}" name="{$itemArray[sec].itemId}">
    {/section}
  </div>
</div>
</form>
{/block}

【问题讨论】：

使用媒体查询或引导..
从这里阅读w3schools.com/css/css_mediatypes.asp 或getbootstrap.com..
@Leothelion 所以我每次都必须设置 div 的高度和宽度..
不是每次都......如果你从引导程序开始，那么它会自动管理，但如果你已经准备好结构，那么使用媒体查询并从大显示开始到更小，并使用百分比的高度和宽度，所以你不必一直打字。最好自己阅读并自己做，这样你会知道更多。

标签： html css

【解决方案1】：

您必须将父 HTML 标记高度设置为 100%。如果不设置其父元素的高度，则元素的高度将为 0%。像这样：

.fill {
  width: 100%;
  height: 100%;
  background-color: green;
}
html, body, main {
  height: 100%;
}
body{
  margin: 0;
  background-color: red;
}

<html>
  <head>
  </head>
  <body>
    <main>
      <div class="fill">100% width and height</div>
    </main>
  </body>
</html>

【讨论】：

【解决方案2】：

我猜vh 和vw 的属性可能会成为你的朋友。

height: 100vh; /* 100% of viewport height */
width: 100vw; /* 100% of viewport width */

但你也可以看看vmin、vmax。 vh 表示：视口高度的百分比。 vw 表示：视口宽度的百分比。

这是与您的问题相关的obligatory link。

如果您对让您的网站在不同屏幕尺寸上“看起来很酷”的通用方法感兴趣，我会推荐 Leo the Lions 的建议。一个简单的方法是使用Bootstrap。

【讨论】：

所以我的意思是说我使用 vmin, vmax 作为我的 div..
如果你想成为你的divs 100% 的 screen 宽度和 100% 的 screen 高度，使用 sn-我写的。 vw 表示视口宽度的百分比，vh 表示视口高度的百分比。这意味着，您分配这些属性值的div 将具有屏幕的宽度和高度。如果填充成为问题，您可能还需要将box-sizing: border-box; 添加到 div。

【解决方案3】：

好吧，你可以设置为 main position:relative，并添加类似这样的特殊类。

position: absolute;
top: 0;
bottom: 0;
width: 100%;
min-height: 100%;
z-index: 1 (if it needed)

这不是最佳解决方案，但我不明白，必须在全窗口上显示什么 div。

【讨论】：

【解决方案4】：

如果你想使用 100% 的高度，你必须确保你已经设置了你的

html, body{ height:100% }

像这样：http://codepen.io/anon/pen/NqwaRx

因为每个收到 % 高度的子元素都将具有其父元素的 % 高度。

【讨论】：

【解决方案5】：

您需要传播.main 的每个父级，使其高度和宽度为 100%，包括“如 noa-dev 所说”的 html 和正文。

html,
body,
.main{
  height:100%;
  width:100%;
}

这仍然可以纯粹在 css 中实现。您只需要识别 main 的每个父级并将其添加到上面的样式中。

【讨论】：