Resizing Div vertically when view port is resized

Question

I am trying to resize a Div(with content) vertically when changing the view port. I want to change the div(with content) size based on vertically increasing or decreasing the size of window.

Currently I am making this work by providing a fix size to my wrapper div and providing overflow to auto , so when screen is resized Vertically it will give me scroll for Div.

Is there a way such that my div(with content) auto shrink to height as screen size is vertically decreased

HTML Fragement

* {
  box-sizing:border-box;
}

body, html {
  height:100%;
}

.container {
  height:100%;
  border:1px solid #bbb;
}

.footer {
  position:fixed;
  bottom:0px;
  text-align:center;
  height:25px;
}

.override {
  border:1px solid blue;
}

.content {
  height:100%
}

.wrapper {
  height:calc(100%-100px);
  overflow:auto;
}

<body>
  <div class='container'>
    <div class='content'>  
      <div class='page-header'> System Dashboard </div>

      <div class='wrapper'>
        <div class='col-md-4 override'>
          First wrapper
          First wrapper
          First wrapper
          First wrapper
          First wrapper
          First wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
        </div>
      </div>

      <div class='footer'> Copyright here </div>  
    </div>
  </div>
</body>

Do you want the div to be **resized** so that it is always the height of the window or do you just want a **scrollbar** when the window is too short? — sorayadragon, Jul 05 '17 at 20:39
@sorayadragon : Generally when window is short, height should provide scrollbar to see content, What I want is div should shrink automatically as window is resized. Like width is adjusted when we re adjust browser — user3045179, Jul 05 '17 at 20:42

Vanity Slug - codidact.com · Answer 1 · 2017-07-05T21:00:49.160

If I understood you correctly you are looking for something that behaves like this. You would have to

set height: 100% to html and body and your div
make your div overflow: auto.

_{Code snippet just simulates height resize. See fiddle for actual demo.}

$('#button').click(function(){
  $('#b').append('First wrapper<br />');
});

$('#reset').click(function(){
  $('#b').empty();
});

html, body {
  height: 100%;
  background: green;
  padding: 0;
  margin: 0;
}
body {
  padding: 20px;
  box-sizing: border-box;
}

#a {
  height: 100%;
  background: red;
  overflow: auto;
  padding: 50px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a">
  <button id="button">add more content to simulate browser height</button> 
  <button id="reset">reset</button> <br>
  <div id='b'>
    First wrapper<br />
    First wrapper<br />
  </div>
</div>

score 1 · Accepted Answer · answered Jul 05 '17 at 20:50

Looks like a job for Flexbox:

 body {
   height: 100vh;
   padding: 0;
   margin: 0;
 }

 .container {
   height: 100%;
   border: 1px solid #bbb;
 }

 .page-header {
   display: block;
 }

 .content {
   display: flex;
   flex-direction: column;
   height: 100%;
 }

 .wrapper {
   width: 100%;
   height: 100%;
   overflow: auto;
 }

 .override {
   border: 1px solid blue;
   height: 100%;
   overflow: auto;
 }

 .footer {
   text-align: center;
   height: 25px;
 }

JSFiddle demo:https://jsfiddle.net/9yhsnaLk/2/

score 1 · Answer 3 · answered Jul 05 '17 at 20:53

The calc function will work, but you need to remove the spaces around the minus sign. You can use vh units to get the viewport height: height: calc(100vh - 100px);.

* {
  box-sizing:border-box;
}

.container {
  border:1px solid #bbb;
}

.footer {
  position:fixed;
  bottom:0px;
  text-align:center;
  height:25px;
}

.override {
  border:1px solid blue;
}

.wrapper {
  height:calc(100vh - 100px);
  overflow:auto;
}

<body>
  <div class='container'>
    <div class='content'>  
      <div class='page-header'> System Dashboard </div>

      <div class='wrapper'>
        <div class='col-md-4 override'>
          First wrapper
          First wrapper
          First wrapper
          First wrapper
          First wrapper
          First wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
        </div>
      </div>

      <div class='footer'> Copyright here </div>  
    </div>
  </div>
</body>

You are right there should be space calc(100% - 10px) – user3045179 Jul 05 '17 at 21:07 — user3045179, Jul 05 '17 at 21:07

score 0 · Answer 4 · answered Jul 05 '17 at 20:28

0

You can use height: 100vh; where VH is Viewport Height

answered Jul 05 '17 at 20:28

Rafael Gadotti Bachovas

413
4
13

Using height:100vh will give Div the size of window – user3045179 Jul 05 '17 at 20:36
Yes. What do you need? Use calc function with 100vh to resize to your needed height. Example: height: calc(100vh - 100px); – Rafael Gadotti Bachovas Jul 05 '17 at 20:39
That I have done and overflow:auto, but when I decrease the size of browser vertically then It give me a scrollbar(as height is fixed), Instead of scrollbar I want is that div should automatically shrink in height when window size is increased or decreased – user3045179 Jul 05 '17 at 20:46
@user3045179 what if you add up the height of all the other objects, and use `calc(100vh - [heights])`? Maybe your `box-sizing` is an issue too. – marcellothearcane Jul 05 '17 at 20:53

score 0 · Answer 5 · answered Jul 05 '17 at 20:36

0

Try by adding vendor prefixes to calc function : -moz-calc and -webkit-calc.

CSS3 height: calc(100%) not working

answered Jul 05 '17 at 20:36

яay0be

11
3

It is not a issue with calc() function – user3045179 Jul 05 '17 at 20:39

Resizing Div vertically when view port is resized

5 Answers5