垂直居中

Question

您好，

查看屏幕截图，我想知道如何使我的简单countdcown始终占据100％的屏幕？我已经让它适合我的手机，但我喜欢它在桌面上100％。

我尝试了什么：

html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
}

但是，这只会使身体100％.. 我从哪里开始？有人有教程或其他什么吗？

Answer 1

使用vw或vh（视口）的一个简单示例，尝试一下，您将看到差异。

还要使元素居中。你可以使用：

  display: flex;
  align-items: center;
  justify-content: center;

垂直居中

参考：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/



视口

参考：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

＆＃13;

body {
  margin: 0;
}

.test1 {
  background: red;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test2 {
  background: green;
  width: 100vw;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerwraper {
  height: 100px;
  width: 200px;
  background: aqua;
}

＆＃13;

<div class="test1">
  <div class="innerwraper">This is 100% width</div>
</div>
<div class="test2">
  <div class="innerwraper">This is 100vw</div>
</div>

＆＃13;

Answer 2

自动身体的高度和宽度为100％，并且无法更改为其他值，因此您的代码无法使用。要使内容占据更大的高度和宽度，您应该修改内容的css高度和重量属性（按钮，文本输入，div等）。

Answer 3

您必须在＆＃39; vw＆＃39;中定义所有尺寸，长度和宽度。并且＆＃39; vh＆＃39;。它代表视口宽度和视口高度。这将告诉浏览器渲染相对于屏幕宽度的每个对象大小（或高度，具体取决于您选择的内容）。

在你的例子中，每个物体的高度应为20vh，边距为5vh。然后四个物体成为完美的100vh（100％视口高度）。

你可以从这个css开始：

input, div {height: 20vh; margin: 5vh 1vh;}

Answer 4

您可以在div中包含按钮和视图的整个组合，例如：

<div id = "wrapper"> </div>

然后在div内部根据百分比修改每个元素的高度和宽度。例如，您有4个垂直元素，底部有3个按钮。因此，底部的三个按钮可以进一步包裹在另一个div中，使它们成为一个元素。然后，您可以将4个元素拆分为height: 25%;并继承宽度。

所以它看起来像这样：

<body>
<div id="wrapper">
      <div class="element"> insert element here such as input </div>
      <div class="element"> element here such as input button </div>
      <div class="element"> element here such as counter </div>
      <div class="element"> 
          <div> </div>
          <div> </div>
          <div> </div>
      </div>

</div>

CSS：

.element{
     height:25%;
     width:inherit;
}

#wrapper{
    height:100%;
    width: 100%;
}

Answer 5

如果没有* { box-sizing: border-box; }

，则代码块内的所有属性

内容不适合......

如何使我的应用程序始终占据屏幕的100％？

5 个答案:

垂直居中

视口