Fadel Berakdar Fadel Berakdar - 7 months ago 12
HTML Question

divs height disappear when I add the "html" tag

In the

tab
content there is two
divs
which they behave perfectly, but once I added the tag
html
, their height disappear.

What I should do to preserve their height and width?

I think I should add css styling for the tag
html
. I tried many things but didn't work!



.graph-containers{
border:solid lightgray;
border-width: 1px;
display: inline-block;
height:80%;
/*box-sizing: border-box;*/
}
.graph-info{
border:solid lightgray;
border-width: 1px;
display: inline-block;
height:80%;
/*box-sizing: border-box;*/

}
.graph_panel {
width:auto;
height:100%;
}
#tabs{
height: 100%;
width:auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container" id="tabs">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home" class="backgroundRed" data-toggle="tab">Main </a>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="home">Main</div>
<div class="graph_panel container" id="main">

<div class="graph-containers container col-xs-12 col-sm-12 col-md-8 col-lg-8 bg-info" id="graph-container">

</div>
<div class="graph-info container col-xs-12 col-sm-12 col-md-4 col-lg-4 bg-danger">

</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>




Answer

Just Add this CSS rule to tab-content class:

.tab-content{
    height:100vh;
}

.tab-content{
  height:100vh;
}

.graph-containers{
  border:solid lightgray;
  border-width: 1px;
  display: inline-block;
  height:80%; 
  /*box-sizing: border-box;*/
}
.graph-info{
  border:solid lightgray;
  border-width: 1px;
  display: inline-block;
  height:80%;
  /*box-sizing: border-box;*/
}
.graph_panel {
  width:auto;
  height:100%;
}
#tabs{
  height: 100%;
  width:auto;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div class="container" id="tabs">
            <div class="panel with-nav-tabs panel-default">
                <div class="panel-heading">
                    <ul class="nav nav-tabs" id="myTab">
                        <li class="active"><a href="#home" class="backgroundRed" data-toggle="tab">Main </a>
                    </ul>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="home">Main</div>
                        <div class="graph_panel container" id="main">
                            <div class="graph-containers container col-xs-12 col-sm-12 col-md-8 col-lg-8 bg-info" id="graph-container">
                            </div>
                            <div class="graph-info       container col-xs-12 col-sm-12 col-md-4 col-lg-4 bg-danger">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>