The div element should stretch to occupy the entire height of the screen

Question

The div element should stretch to occupy the entire height of the screen

I have structured my webpage with three different divs. The left one is defined with col-md-2, the middle one with col-md-8, and the remaining right div with col-md-2. I want the right div to take up 100% of the screen height, even when no controls are present. I have tried setting both height and min-height to 100%, but it doesn't seem to be working. Here is a snippet of my code. Can anyone advise me on how to resolve this issue?

<div id="propertiesContainer" class="row col-md-2" style="border:solid 1px;padding-left:unset;padding-right:unset;min-height: 100%;height:100%;"></div>

html css twitter-bootstrap

Answer 1

Answer №1

Make sure to set the body, html, container, and row elements to 100% as well.

Keep in mind that a div will only take up 100% height (without any content inside) if its parent element is also set to 100% height.

html,body{
 width:100%;
 height:100%;
}
.row div{
  height:100px;
  background-color:red;
}
.row, .container{
  height:100%;
}
.row .right{
  height:100%;
  background-color:green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-2"></div>
        <div class="col-xs-8"></div>
        <div class="col-xs-2 right"></div>
    </div>
</div>

Answer 2

Make sure to set the body, html, container, and row elements to 100% as well.

Keep in mind that a div will only take up 100% height (without any content inside) if its parent element is also set to 100% height.

html,body{
 width:100%;
 height:100%;
}
.row div{
  height:100px;
  background-color:red;
}
.row, .container{
  height:100%;
}
.row .right{
  height:100%;
  background-color:green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-2"></div>
        <div class="col-xs-8"></div>
        <div class="col-xs-2 right"></div>
    </div>
</div>

Answer 3

Answer №2

If you want to make an element's height 100% of the screen's height, each parent of that element must also have a height of 100%.

For Example

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);

html,
body {
  height: 100%;
}

.main {
  height: 100%;
}

.main .side {
  height: 100%;
}

/*/ Decoration /*/
body {
  background-color: #ffeeff;
}

.main {
  border: dashed 1px blue;
}

.main div {
  border: dashed 1px red;
}

<div class="container main">
  <div class="col-xs-2">
    Left
  </div>
  <div class="col-xs-8">
    Center
  </div>
  <div class="col-xs-2 side">
    Right
  </div>
</div>

Answer 4

If you want to make an element's height 100% of the screen's height, each parent of that element must also have a height of 100%.

For Example

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);

html,
body {
  height: 100%;
}

.main {
  height: 100%;
}

.main .side {
  height: 100%;
}

/*/ Decoration /*/
body {
  background-color: #ffeeff;
}

.main {
  border: dashed 1px blue;
}

.main div {
  border: dashed 1px red;
}

<div class="container main">
  <div class="col-xs-2">
    Left
  </div>
  <div class="col-xs-8">
    Center
  </div>
  <div class="col-xs-2 side">
    Right
  </div>
</div>

Answer 5

Answer №3

<div class="new-class">
</div>

CSS

.new-class{
    max-width: 100%;
}

or 
.new-class{
   width: 100%;
}

Answer 6

<div class="new-class">
</div>

CSS

.new-class{
    max-width: 100%;
}

or 
.new-class{
   width: 100%;
}

Answer 7

Answer №4

Feel free to share your code on Fiddle for better assistance, or you can refer to the example code provided below:

.main-content{
  position:relative;
  display:flex;
  height:100%;
  background: #f8f8f8;
  justify-content:center;
}

html, body{
  height:100%;
}

Answer 8

Feel free to share your code on Fiddle for better assistance, or you can refer to the example code provided below:

.main-content{
  position:relative;
  display:flex;
  height:100%;
  background: #f8f8f8;
  justify-content:center;
}

html, body{
  height:100%;
}

The div element should stretch to occupy the entire height of the screen

Answer №1

Answer №2

For Example

Answer №3

Answer №4

Similar questions

What is the best way to determine if a date is empty using Vuetify?

Creating a bold portion of a string

Working with both Javascript and jQuery code within a single HTML file

Press the [Submit] button to conceal DIV Container 1, reveal DIV Container 2, and populate DIVs discovered in a .PHP file within DIV Container 2

Why is my main.scss having trouble importing other files?

Control your thumbnails with the powerful iDangerous Swiper feature

What is the best way to present sorted items on a user interface?

Update the CSS property according to the selected list item in the slider using Glider JS

Transform preexisting Vue UI library measurements into pixels

Tips for Including a Parallax Image Within a Parallax Section

Creating a dynamic dropdown menu based on a class value using JavaScript in PHP

Is there a downside to concealing a checkbox off-screen using position: absolute for a clever workaround?

Ways to remove unwanted line breaks following PHP code within HTML documents

Unable to retrieve the value of ng-model using $scope

The submission of the form is not functioning correctly when triggered by JavaScript using a button

How can I efficiently verify page references using tools like CSS, JavaScript, and more?

Move your cursor over the image to activate the effect, then hover over it again to make the effect disappear

Reveal or conceal interactive material using data attributes

Image carousel with variable height

The challenge of margin collapse