0

This should be a simple fix, yet I can't seem to figure it out. I am trying to stretch my container-fluid class all the way to the bottom of the window, but it won't work. I have tried applying everything from

Height not 100% on Container Fluid even though html and body are

but none of it works. Here is my html and css:

html: 

<div class="container-fluid fill-height">
  <h1 class="text-center">WikiGen</h1>

  <div class="row fill-height">
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
      <label class="align-top">Search for an article:</label>
    </div>
  </div>

  <div class="row fill-height">
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
      <label class="align-top">Or, pick one at random:</label>
    </div>
    <div class="col-md-3">
      <a href="https://en.wikipedia.org/wiki/Special:Random">
        <img id = "dice" src="https://lh3.ggpht.com/kOal-qldAR-YwTvStekh0NbGnwUz-kB5idDv97ZOODRZnxKCs-52YNHLkZX3Ttbjv890=w300"/>
      </a>
    </div>
    <div class="col-md-3">
    </div>
  </div>
</div>

css:

.fill-height {
    min-height: 100%;
    height:auto !important; 
    height: 100%; 
}
.container-fluid {
  background: grey;
}
h1 {
  font-family: "Indie Flower";
  font-size: 100px;
}
h3 {
  margin: 10px;
  font-size: 20px;
}
label{
    display: inline-block;
    float: right;
    clear: left;
    width: 250px;
    font-size: 18px;
    margin: 5.5px;
    text-align: right;
}
input {
  margin: 5px;
  width: 300px;
  float: left;
}
.col-md-3 {
/*   background: black; */
}
#dice {
  width: 50px;
  height: 50px;
  margin-top: -5px;
  margin-left: 40px;
  mix-blend-mode: multiply;
}
.row {
  margin-bottom: 50px;
}
#button {
  margin-top: 2px;
}
Community
  • 1
  • 1
Andrew Takao
  • 105
  • 1
  • 13

3 Answers3

1

You can take advantage of view height here

.fill-height{
   height: 100vh;
}

You can set the height of the parent element(may be container-fluid) to 100vh and set the child element's height accordingly and please have a look at viewport-sized-typography.

Uday
  • 345
  • 4
  • 8
0

Simple fix - you need to add a style that sets the html and body elements to a height of 100%. Add this to your css and it should be fine:

html, body {
    height: 100%
}
Brandon
  • 3,074
  • 3
  • 27
  • 44
0

Use the 100vh method. In CSS vh means visible height of the browser window. I don't recommend using percentages on height because it's based on total length of the page, including what is not currently visible on screen. You can also do 60vh, and other values, which correspond to 60% of the visible height of the browser window.

Trikucian
  • 26
  • 1