Question

在tab内容中有两个divs，它们表现得非常完美，但是一旦我添加了标记html，它们的高度就会消失。

我应该怎样做以保持它们的高度和宽度？

我想我应该为标记html添加css样式。我尝试了很多东西，但没有用！

.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 1

只需将此CSS规则添加到tab-content类：

.tab-content{
    height:100vh; /* 100vh means 100% of the viewport height */
}

.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>

当我添加“html”标签时，divs height消失

1 个答案: