如何使窗口大小适合div？

问题描述

基本上，我试图模仿这个主题的第一页：

我想让第一部分占据整个屏幕，然后点击按钮将向下滚动到网站上的其他页面（我将在稍后添加按钮，但无论我做什么，我都会得到空白区域，我尝试在CSS中使用div的百分比，但它似乎没有做任何事情，我只是希望黑色的背景延伸到窗口的底部，无需滚动条，无论屏幕大小。

代码可以在这里找到：

  body {
 width：100％; 
 height：100％; 
} 
 
 html {
 height：100％; 
} 
 
 h1 {
 margin-top：0; 
 padding-top：10％; 
} 
 
 .container-fluid {
 padding：0px; 
} 
 
 .section1 {
 background-color：＃000000; 
 height：100％
} 
 
 .title {
 font-family：Quicksand; 
颜色：#FFFFFF; 
} 
 
 #name {
 font-size：5em; 
} 
 
 #info {
 font-size：3em; 
填充底部：4％; 
} 
 
 #bio {
 font-size：2em; 
填充底部：10％; 
保证金余额：5％; 
保证金 - 右侧：5％; 
} 
 
 .fa-chevron-circle-down {
 color：#FFFFFF; 
填充底部：4％; 
 
  

谢谢！

解决方案

为了让div适合整个屏幕，试试这个：

  body {
保证金：0; 
} 
 
 .my_fullscreen_div {
 width：100vw; 
身高：100vh; 
} 
  

Essentially, i'm trying to emulate the first page of this theme:http://blackrockdigital.github.io/startbootstrap-grayscale/

I want to make it so that the first section occupies the entire screen, and clicking the button will scroll down to the other pages on the site (I'll be adding the button later. However, I end up with white space no matter what I do. I tried playing around with the percentage of the div in the css, but it didn't seem to do anything. I just want the black background to extend down to the bottom of the window without a scroll bar, no matter the screen size.

Code can be found here: http://codepen.io/pwatrous/pen/qZeaog

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

html {
    height: 100%;
}

h1 {
    margin-top: 0;
    padding-top: 10%;
}

.container-fluid {
    padding: 0px;
}

.section1 {
    background-color: #000000;
    height: 100%
}

.title {
    font-family: Quicksand;
    color: #FFFFFF;
}

#name {
    font-size: 5em;
}

#info {
    font-size: 3em;
    padding-bottom: 4%;
}

#bio {
    font-size: 2em;
    padding-bottom: 10%;
    margin-left: 5%;
    margin-right: 5%;
}

.fa-chevron-circle-down {
    color: #FFFFFF;
    padding-bottom: 4%;
}

Thanks!

解决方案

To make a div fit the entire screen, try this:

body {
    margin: 0;
}

.my_fullscreen_div {
    width: 100vw;
    height: 100vh;
}

这篇关于如何使窗口大小适合div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！