CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
good.learner
good.learner

Reputation: 121

css - align divs to occupy full height if browser

I am looking at achieving the below image. I am not really sure on how to get the css working for the below structure. Should I be making DIV2 absolute? I want the nav, div1 and div2 to occupy full height of the broswer.

enter image description here

My HTML skeletal is as follows.

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                </a>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div>
                    DIV 1
                </div>
                <div>
                    DIV 2
                </div>
            </div>
        </div>
    </div>
</body>

Upvotes: 0

Views: 88

Answers (5)

forethought
forethought

Reputation: 3263

Here you can find the CSS styles based on your HTML structure. The code is not responsive but it will give you an idea on how to go about solving your own problem.

body {
  margin: 0;
}

.navbar {
  background: blue;
  height: 50px;
}

.container-fluid .row .col-md-6 {
  max-width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  // 50px is height of the navbar so subtracting it from total height 
  height: calc(100vh - 50px); 
}

.col-md-6 > div {
  display: flex;
  justify-content: center;
  align-content: center;
  font-size: 30px;
}

.col-md-6 div:first-child {
  flex: 1;
  min-height: 400px;
  /*Setting minimum height so height of div will not go below 400px otherwise it will get smaller than div2 due to flex:1
  flex: 1 takes 100% of height - 50px - 100px 
  */
  background-color: red;
}

.col-md-6 div:last-child {
  height: 100px;
  background-color: green;
}
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
      </a>
    </div>
  </div>
</nav>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <div>
        DIV 1
      </div>
      <div>
        DIV 2
      </div>
    </div>
  </div>
</div>

Upvotes: 1

i.G.
i.G.

Reputation: 77

you have to use container class instead of container-fluid to have div centered on page her the code

<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
            </a>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div>
                DIV 1
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div>
                DIV 2
            </div>
        </div>
    </div>
</div>

for height you can use vh css unities OR use Felxbox and if you chose this second solution probably you can use V4 of BS

Upvotes: 0

vfle
vfle

Reputation: 1495

I have provided a non-bootstrap answer, to help you understand the flexbox.

Setting the parent container to full height is the first step. 

.container{
     display: flex;
     height: 100vw;
     flex-direction: column; 
}

Then by using flex: 1; we allow the children to take all the available space.

Last step is to limit the max-height of the second child by using max-height.

Working example here

Upvotes: 2

Luke Ramsden
Luke Ramsden

Reputation: 734

Set <html> and <body> to have 100% height, then set height on the divs to however large you want them to be (say 80%), as well as the container for the divs. Percentage height is based on the parent of the element.

Upvotes: 3

Michael Ischenko
Michael Ischenko

Reputation: 11

Do not use bootstrap grid. Use flexbox. Parent div must have 100% height, display: flex and column direction. Think that way.

Upvotes: 0

Related Questions