屏幕的 100% 高度和宽度 [重复]
Posted
技术标签:
【中文标题】屏幕的 100% 高度和宽度 [重复]【英文标题】：100% height and width of screen [duplicate] 【发布时间】：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 的高度和宽度.. 不是每次都......如果你从引导程序开始，那么它会自动管理，但如果你已经准备好结构，那么使用媒体查询并从大显示开始到更小，并使用百分比的高度和宽度，所以你不必一直打字。最好自己阅读并自己做，这样你会知道更多。 【参考方案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 的每个父级并将其添加到上面的样式中。
【讨论】：
以上是关于屏幕的 100% 高度和宽度 [重复]的主要内容，如果未能解决你的问题，请参考以下文章