製作高度和寬度100％的設備

我希望身體有15px的邊距並保持100％窗口的高度和寬度，100 vh是同樣的事情。製作高度和寬度100％的設備

我想要一個適合屏幕（用戶分辨率）的歡迎屏幕，所以基本上，當用戶調整窗口大小時，主體應該自行調整屏幕高度和寬度。

好吧，所以問題是當我使用100％或vh與餘量溢出，我不能使用隱藏cuz我需要底部部分，現在寬度可以，因爲它的顯示塊，修復寬度問題。

h https://jsfiddle.net/0dx36zb4/

2016-11-19 potato

嘗試的高度和寬度自動 –

嘗試

body { 
    width: 100vw; 
    height: 100vh; 
}

來源

2016-11-19 09:13:53

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    border: 0; 
 
    overflow: hidden; 
 
} 
 
.splash { 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 0; 
 
}

<img src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg 
 
    " class="splash" />

來源

2016-11-19 09:21:52

我需要空間。 – potato

你能告訴我你想要什麼樣的屏幕？所以我幫你。 –

帶頁邊空白的全屏登陸頁面，不滾動 – potato

你必須使用box-sizing: border-box;隨着width: 100vw;和height; 100vh;

來源

2016-11-19 09:24:11

適用於填充不是邊距，仍然存在邊距溢出 – potato

也不允許填充到底部 – potato

您需要的邊距是多少？您可能需要採取一種解決方法才能使其發揮作用。 –

請勿在身體上使用邊距，而應使用父/子元素並在父級上設置填充。邊距不在元素中，因此在計算中不考慮 - 因爲它是寬度/高度的100％，每個方向加上15px，所以溢出。填充位於元素內部，您可以將瀏覽器設置爲使用box-sizing:border-box屬性在寬度/高度規範中考慮它。

HTML

<html> 
    <body> 
     <div id="parent"> 
      <div id="child"> 
      </div> 
     </div> 
    </body> 
</html>

CSS

body { 
    width:100vw; 
    height:100vh; 
} 

#parent { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    width:100%; 
    height:100%; 
    padding:15px; 
    margin:0; 
} 

#child { 
    width:100%; 
    height:100%; 
    margin:0; 
}

編輯

我也能得到您的jsfiddle工作，所以你可以看到這樣一個例子，如果你用下面的代碼替換你的代碼。

html,body { 
    background-color: red; 
    height: 100%; 
    margin:0; 
    padding:15px; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
} 
section { 
    background-color: yellow; 
    height: 100%; 
    margin: 0; 
}

來源

2016-11-19 09:32:05 ryansin

使用填充和框大小來解決問題。我更新了的jsfiddle工作：

https://jsfiddle.net/0dx36zb4/4/


 
html,body { 
 
    background-color: red; 
 
    height: 100%; 
 
    box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
} 
 

 
body { 
 
    padding:15px; 
 
    margin: 0; 
 
} 
 

 
section { 
 
    background-color: yellow; 
 
    height: 100%; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<body> 
 
    <section> 
 
    <h1>hello</h1> 
 
    </section> 
 
</body>

來源

2016-11-21 17:48:42 pulekies

製作高度和寬度100％的設備

回答

相關問題