Question

基本上，我试图模仿这个主题的第一页： http://blackrockdigital.github.io/startbootstrap-grayscale/

我想这样做，以便第一部分占据整个屏幕，点击按钮将向下滚动到网站上的其他页面（我稍后会添加按钮。但是，我最终会无论我做什么，我都会尝试使用白色空间。我尝试使用css中div的百分比，但它似乎没有做任何事情。我只是希望黑色背景延伸到窗口的底部而不用滚动条，无论屏幕尺寸如何。

可以在此处找到代码：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%;
}

谢谢！

Answer 1

要使整个屏幕适合div，请尝试以下方法：

body {
    margin: 0;
}

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

Answer 2

方法1：

尝试在身体中添加背景颜色。

body {
background-color:black;
}

方法2：

HTML：将section2 div放在section1 div

中

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="section1 text-center">
        <h1 class="title" id="name">Patrick Watrous</h1>
        <h2 class="title" id="info">Learn. Implement. Innovate.</h2>
        <i class="fa fa-chevron-circle-down fa-5x"></i>
        <p class="title" id="bio">The ability to dream up an idea and then recreate it on a computer has always been something that has caused me immense satisfaction. Due to this, I'm pursuing a bachelor's degree at Northeastern University in computer science and business. I'm interested in all facets of design, from Bootstrap to Java. Take a look at my website and see what i've been up to!</p>
  <div class="section2 text-center">
    <p>Lorem ipsum dolor sit amet,.....
  </div>
      </div>
    </div>
  </div>
</div>

如何使div适合窗口的大小？

2 个答案: