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

ul background transparency only works with absolute positioning if using a Transparent PNG

Tips for displaying only one image when clicked and hiding other divs:

Are there any jQuery plugins available that can display a loader image while a page is loading?

Is there a way I can utilize a for-loop and if statement in JavaScript to present the information accurately within the table?

The issue I am facing is that my Contact Form is sending empty emails whenever someone visits the

Create a scrollable div within a template

If the text width of a label exceeds the total width of its container, intelligently display a sub-string based on pixel calculations

What is the approach for incorporating JavaScript variables in Jade templates for writing inline CSS styles?

Hello there! I'm currently working on implementing a button that will alter the CSS grid layout

Beside the element, a dropdown navigation menu emerges

Exploring JqueryUI tab navigation with the help of the <a> tag

Deactivate radio buttons when the table value is greater than or equal to one

Changing the text color of Material UI Accordion Summary upon expansion

Sorting items using jQuery filter

Using PHP and JQuery to disable a button after the letter "U" is typed

Error code 102 appeared, stating: "The server has declined the connection attempt"

What strategies can be implemented to minimize the impact of HTML code on just one specific div (or any other chosen element)?

How to correct header alignment in HTML for Google Table

tips for rotating a bootstrap background image

Extracting information from a checkbox list displayed within an HTML table