Question

我的网页是大屏幕的信息屏幕网站，由顶部（左侧和右侧）两个引导板和下面的主面板（标签面板）组成。

单击选项卡时，选项卡面板不会填充显示的其余部分（在顶部面板之后），这会让人感到恼火。

所以我需要一些如何解决这个问题的技巧。我需要考虑许多屏幕格式，但最重要的是大屏幕。我在网上搜索试图找到答案，但还没有运气。希望你能帮帮我

关于Geir

<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Information Screen</title>

    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700,inherit,400" rel="stylesheet" type="text/css">

    <!-- Bootstrap Core CSS -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

</head>

<body>
    <div id="wrapper">
        <!--<div id="loading">
            <div id="spinner"></div>
        </div>-->
        <!-- Page Content -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">

                    <div class="page-header">
                        <div class="pull-left">
                            <h1> Information Screen</h1>
                        </div>
                        <div class="pull-right">
                            <h3 class="text-right">
                                <small><span id="divLocal">&emsp;</span></small>
                            </h3>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <!-- /.col-lg-12 -->
            </div>

            <!-- /.row -->
            <div class="row">
                <div class="col-lg-9">
                    <div class="panel panel-default" id="UpperLeftPart">
                        <div class="panel-heading">
                            <i class="fa fa-bar-chart-o fa-fw"></i> Key figures 1
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body pane">

                            upper left

                        </div>
                        <div class="clearfix"></div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-9 -->
                <div class="col-lg-3">
                    <div class="panel panel-default" id="UpperRightPart">
                        <div class="panel-heading">
                            <i class="fa fa-bar-chart-o fa-fw"></i> Key figures 2
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            upper right
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <div class="clearfix"></div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-3 -->
                <div class="clearfix visible-lg visible-md"></div>
            </div>
            <!-- /.row -->

            <div class="row">

                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Basic Tabs
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#home" data-toggle="tab">Home</a>
                                </li>
                                <li>
                                    <a href="#profile" data-toggle="tab">Profile</a>
                                </li>
                                <li>
                                    <a href="#messages" data-toggle="tab">Messages</a>
                                </li>
                                <li>
                                    <a href="#settings" data-toggle="tab">Settings</a>
                                </li>
                            </ul>
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div class="tab-pane fade in active" id="home">
                                    <h4>Home Tab</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                </div>
                                <div class="tab-pane fade" id="profile">
                                    <h4>Profile Tab</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                </div>
                                <div class="tab-pane fade" id="messages">
                                    <h4>Messages Tab</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                </div>
                                <div class="tab-pane fade" id="settings">
                                    <h4>Settings Tab</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                </div>
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
            </div>
        </div>
    </div>

    <!-- /#page-wrapper -->
    <!-- /#wrapper -->

    <!-- Bootstrap Core JavaScript -->
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- jQuery -->
    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- Metis Menu Plugin JavaScript -->
    <script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>

</body>

</html>

Answer 1

你可以这样做：

HTML：我添加了3个类来标识行和带有标签的面板（您可以在Codepen上看到它）

CSS：我设置(和min-height以查看在移动设备上浏览网站时的内容，或者当窗口高度较小时，您可以更改该值并设置不同的{{1在不同的屏幕尺寸上。

overflow-y

JS：当您调整窗口大小时，此代码将计算当前窗口高度，行的当前高度以及使用制表符设置面板的高度值（窗口高度的100％减去行的高度减去50px以查看底边）。

min-height

如何获得引导标签面板的最大高度

1 个答案:

CODEPEN