Home Ask Login Register

Developers Planet

Your answer is one click away!

Daniel Kobe February 2016

How can I allocate all height space not used to my element

I want my table to take up all remaining height on the page not being used by the menubar div and the slider container div. Would I use flexbox to accomplish this? If so how? Thanks.

HTML

<section class="analysis" ng-controller="Analysis">
    <div class="menubar">
        <div class="view-ctrls text-center">
            <div class="btn-group" role="group">
                <button class="btn btn-default" ng-class="{'active-view': active_views[0]}" ng-click="toggleView(0)">R-Theta</button>
                <button class="btn btn-default" ng-class="{'active-view': active_views[1]}" ng-click="toggleView(1)">Cartesian</button>
                <button class="btn btn-default" ng-class="{'active-view': active_views[2]}" ng-click="toggleView(2)">Longitudinal</button>
                <button class="btn btn-default" ng-class="{'active-view': active_views[3]}" ng-click="">Console</button </div>
            </div>
        </div>
        </ul>
    </div>
    <table>
        <tr class="r1">
            <td id="v1">View 1
                <div class="close-btn" ng-click="changeView(0)">x</div>
            </td>
            <td id="v2">View 2
                <div class="close-btn" ng-click="changeView(1)">x</div>
            </td>
        </tr>
        <tr class="r2">
            <td colspan="2" id="v3">
                <div class="close-btn" ng-click="changeView(2)">x</div>
                <ul>
                    <li class="frames-container">
                        Frames
                    </li>
                </ul>
            </td>
        </tr>
    </table>
    <div class="slider-container">
        <ul>
            <li class="frame-num">
                #
            </li>
            <li cla        

Answers


Pangloss February 2016

You can try the CSS table layout, in order to do so, I added a div around the table.

By the way, you have some markup errors, got them fixed below.

html, body, .analysis {
  height: 100%;
  margin: 0;
}
.analysis {
  display: table;
}
.analysis .menubar,
.analysis .table-container,
.analysis .slider-container {
  display: table-row;
}
.analysis .table-container,
.analysis .table-container table {
  height: 100%;
}
.analysis .table-container table {
  border: 1px solid red;
}
<section class="analysis" ng-controller="Analysis">
  <div class="menubar">
    <div class="view-ctrls text-center">
      <div class="btn-group" role="group">
        <button class="btn btn-default" ng-class="{'active-view': active_views[0]}" ng-click="toggleView(0)">R-Theta</button>
        <button class="btn btn-default" ng-class="{'active-view': active_views[1]}" ng-click="toggleView(1)">Cartesian</button>
        <button class="btn btn-default" ng-class="{'active-view': active_views[2]}" ng-click="toggleView(2)">Longitudinal</button>
        <button class="btn btn-default" ng-class="{'active-view': active_views[3]}" ng-click="">Console</button>
      </div>
    </div>
  </div>
  <div class="table-container">
    <table>
      <tr class="r1">
        <td id="v1">View 1
          <div class="close-btn" ng-click="changeView(0)">x</div>
        </td>
        <td id="v2">View 2
          <div class="close-btn" ng-click="changeView(1)">x</div>
        </td>
      </tr>
      <tr class="r2">
        <td colspan="2" id="v3">
          <di 

Post Status

Asked in February 2016
Viewed 3,534 times
Voted 13
Answered 1 times

Search




Leave an answer


Quote of the day: live life

Devs Planet ®

2014-2016 www.devsplanet.com

Devs Planet © all rights reserved

Search