How to Fix The Height of a <Div> Element

How to fix the height of a div element?

change the div to display block

.topbar{
    display:block;
    width:100%;
    height:70px;
    background-color:#475;
    overflow:scroll;
    }

i made a jsfiddle example here please check

http://jsfiddle.net/TgPRM/

How to fix a div height

Given your description above something like the below should work (Very simplified)

<div id="chatContainer">
    <div style="height:400px; overflow-y:auto;">
    <!-- YOUR CHAT CONTENT GOES HERE -->
    </div>

    <textarea id="HaveYourSay"></textarea>
    <button onclick="SendChat()">Send</button>
</div>

That will allow the contents of the div to reach a height of 400px before you get the scroll bar applied to the side.

Ive not used your HTML but have kept the example above simple so that you can apply it to your own app.

Check out the JS Fiddle : https://jsfiddle.net/6nep283h/1/

Note that I have used inline styles here for simplicity - I woudln't recommend using them in your app.

How to fix div height

A solution with your requirements and example code:

gridDiv container must always take up 60% of the screen

Assuming your div looks like this: <div class="gridDiv"> you can use the following code:

html, body{
    height:100%;
}

.gridDiv{
    height: 60%;
}

gridDiv has a scroll bar if the content inside overflows

.gridDiv{
    overflow:scroll;
}    

See the entire div with overflowing filler text on this JSFiddle.

height style property doesn't work in div elements

You cannot set height and width for elements with display:inline;. Use display:inline-block; instead.

From the CSS2 spec:

10.6.1 Inline, non-replaced elements

The height property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)

EDIT — You're also missing a ; terminator for the height property:

<div style="display:inline; height:20px width: 70px">My Text Here</div>
<!--                                  ^^ here                       -->

Working example: http://jsfiddle.net/FpqtJ/

How do I set a Fixed Height and Width to a div

Added display: flex on the <b> tag and removed ampersand styles and made it a span instead of a div and added line-height: 1 to it.

.ampersand {
  line-height: 1;
  display: inline-block;
  width: 60px;
  transition: all 1s;
}

<b display: flex;>Flo<span class="ampersand">&</span>Behold</b>

$(document).ready(function() {  var fonts = ['Dosis', 'Exo', 'Gloria Hallelujah', 'PT Sans', 'PT Serif', 'Yaanone Kaffeesatz'];  var counter = 0;  var inst = setInterval(change, 2000);
  function change() {    if (counter > fonts.length) {      counter = 0;    }    font_selection = fonts[counter];    $('.ampersand').css("font-family", font_selection);    counter++;  }});

@import url('https://fonts.googleapis.com/css?family=Quicksand');@import url('https://fonts.googleapis.com/css?family=Molengo');@import url('https://fonts.googleapis.com/css?family=Dosis|Exo|Gloria+Hallelujah|PT+Sans|PT+Serif|Yanone+Kaffeesatz');* {  font-family: "Gill Sans", sans-serif;  margin: 0px;  padding: 0px;}
body {  background-color: #f5f6fa;}
#header {  width: 100%;  padding: 4% 0px 20px 0px;}
.logo_text {  font-family: "Molengo", sans-serif;  font-size: 70px;  color: #333;}
.ampersand {  line-height: 1;  display: inline-block;  width: 60px;  transition: all 1s;}
.nav {  width: 100%;  padding: 25px 0px 25px 0px;}
.nav>ul {  padding-top: 15px;}
.nav>ul>a {  text-decoration: none;  color: #333;}
.nav>ul>a>li {  color: #333;  font-size: 25px;  padding: 20px 30px 20px 30px;  display: inline;  transition: border 0.1s linear;  border: 3px solid #f5f6fa;}
.nav>ul>a>li:hover {  border: 3px solid #333;}
#body {  padding-top: 35px;  width: 100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper" align="center">
  <div id="header">    <div class="logo">      <span class="logo_text"><b display: flex;>Flo<span class="ampersand">&</span>Behold</b>      </span>    </div>    <div class="nav">      <ul>        <a href="#">          <li>Home</li>        </a>        <a href="#">          <li>About</li>        </a>        <a href="#">          <li>Music</li>        </a>        <a href="#">          <li>Media</li>        </a>        <a href="#">          <li>Contact</li>        </a>      </ul>    </div>  </div>  <div id="body"></div></div>

.box-centerside {  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;  float: left;  min-height: 100px;  width: 260px;}

<div class="box-centerside">  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br></div>

display: block;
overflow: auto;

.box .row.content {
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    overflow-y: auto;
    /*justify-content: center;              removed  */
    align-items: center;
}

html {
  background-color:black;
  color:white;
  text-align:center;
}
#board{
 height:300px;
}
.cell {
  border: 1px solid white;
  margin:1px;
  width:30%;height:30%;
}