如何讓我的應用程序始終佔用100％的屏幕？

嗨，

見截圖，我想知道我怎麼能適合我的簡單countdcown來始終以屏幕的100％？我已經使它適合我的手機，但我喜歡它在桌面上100％。

我已經試過什麼：

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

但是，這樣只會讓身體100％.. 從哪裏開始？有人有教程或任何東西？

來源

2017-06-30 baswijdenesdotcom

使用100vw？（視口） –

發佈您的其他代碼，以便我們可以看到/複製。幫助查找教程是關於stackoverflow的主題。 https://stackoverflow.com/help/on-topic –

https://stackoverflow.com/questions/17555682/height-100-or-min-height-100-for-html-and-body-elements – Fahmi

一個使用vw或vh（視口）的簡單示例，試試看，你會看到不同之處。

也用來居中您的元素。你可以使用：

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

垂直居中

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

視窗

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

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; 
 
}

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

來源

2017-06-30 15:45:52

自動的高度和所述主體的寬度是100％，因此您的代碼是無用它不能被改變爲其它值。爲了使內容佔用更大的高度和寬度，您應該修改內容（按鈕，文本輸入，div等）的css高度和重量屬性。

來源

2017-06-30 15:47:44

您必須在'vw'和'vh'中定義所有尺寸，長度和寬度。它代表視口寬度和視口高度。這將告訴瀏覽器渲染每個對象的大小相對於屏幕的寬度（或高度，取決於您選擇的）。

在你的例子中，每個對象應該是20vh高度，邊緣爲5vh。四個物體使得100vh完美（100％視口高度）。

你可以用這個CSS開始：

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

來源

2017-06-30 15:54:14 JoostS

你可以用按鈕和意見的整個組合在一個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%; 
}

來源

2017-06-30 16:14:23 Bryan

上面的代碼塊內的所有屬性，如果沒有* { box-sizing: border-box; }

的內容不會適合...

來源

2017-06-30 18:48:05

如何讓我的應用程序始終佔用100％的屏幕？

回答

垂直居中

視窗

相關問題