CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Patrick Watrous
Patrick Watrous

Reputation: 11

How to make a div fit to the size of the window?

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!

Upvotes: 1

Views: 6986

Answers (2)

tejas
tejas

Reputation: 149

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

body {
    margin: 0;
}

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

Upvotes: 7

shunz19
shunz19

Reputation: 534

Method 1:

Try adding a background-color in the body.

body {
background-color:black;
}

Method 2:

HTML: place the section2 div inside the 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>

Upvotes: 0

Related Questions