Question

我试图在网站上制作一种屏幕控制台模拟器。基本上我需要一个黑色的div伸展到屏幕的底部。我还希望在控制台下方有更多东西。我该怎么办？我找到了一些答案，但没有一个有效，可能是因为我使用的是Bootstrap 4，大多数答案都是针对v3的。

我的HTML：

＆＃13;

html,
body {
  height: 100hv;
}

#console {
  height: 100hv;
  font-style: italic;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div id="console" class="row bg-dark text-white mh-100">
  <div class="col">
    Rohan Khajuria
  </div>
</div>

＆＃13;

Answer 1

你误写了班级<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <div id="console" class="row bg-dark text-white h-100 m-0"> <div class="col"> Rohan Khajuria </div> </div> <p>Next</p>（你写了mh-100）。

继承高度，你应该使用百分比而不是视口单位：

body {
  margin: 0;
  height: 100vh;
}

#console {
  font-style: italic;
}

或仅使用

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />


<div id="console" class="row bg-dark text-white h-100 m-0">
  <div class="col">
    Rohan Khajuria
  </div>
</div>
<p>Next</p>

演示：

＆＃13;

body{
    margin:0;
    padding:0;
    font: 15px/1.5 Montserrat,sans-serif;
    color:white;
    background-color:#212121;
}
.container{
    width:80%;
    margin:auto;
    overflow:hidden;
}
header #top-info{
    background-color:#263238;
    min-height:50px;
    border-bottom:1px solid #546E7A;
}
header #top-info #online{
    background-color:#558B2F;
    float:left;
    min-height:50px;
    min-width:330px;
}
header #top-info #online p{
    margin:0;
    padding:0;
    padding-top:12px;
    padding-right:10px;
    font-size:18px;
    font-weight:bold;
    text-shadow:1px 1px 1px #212121;
    text-transform: uppercase;
}
header #top-info #online img{
    padding-left:10px;
    padding-right:10px;
    padding-top:8px;
    float:left;
    width:10%;
}
header #top-info #online span{
    color:#7CB342;
}
header #top-info #btn{
    float:right;
    margin-top:12px;
}
header #top-info #btn a{
    text-decoration: none;
    color:white;
    text-shadow:1px 1px 1px #212121;
    text-transform: uppercase;
}
header #top-info #btn img{
    width:15%;
    vertical-align: middle;
}
header #top-info #btn ul{
	margin:0;
	padding:0;
}
header #top-info #btn li{
	float:left;
	list-style-type:none;
}
header #navigation{
    background-image:url('../img/background.png');
    background-repeat: no-repeat;
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px){
    header #online{
        float:none;
        text-align:center;
        width:100%;
    }
    header #top-info #online img{
        display:none;
    }
    header #top-info #online p{
        margin:0;
        padding:0;
        text-align:center;
        margin-right:26px;
        margin-top:10px;
    }
    header #top-info #btn{
        margin:auto;
        text-align:center;
        margin-bottom:10px;
    }
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <meta name="description" content="Menoria siteweb officiel">
        <meta name="keywords" content="menoria, pvpfaction, minecraft, 1.7.10, launcher">
        <meta name="author" content="Simon Bolduc">
        <title>Ménoria | Serveur 1.7.10</title>
        <link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7cOpen+Sans:400,700" rel="stylesheet" type="text/css">
    </head>
    <body>
        <header>
            <section id="top-info">
                <div class="container">
                    <div id="online">
                        <img src="https://dev.menoria.com/img/online.png"/>
                        <p>Il y a <span>416</span> joueurs en ligne</p>
                    </div>
                    <div id="btn">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="https://dev.menoria.com/img/login.png"/>
                                    Se connecter
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://dev.menoria.com/img/register.png"/>
                                    S'inscrire
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
            <section id="navigation">
                <div class="container">
                    <div id="logo">
                        <h1><span>M</span>enoria</h1>
                        <p><span>Ménoria</span> | Serveur Minecraft <span>1.7.10</span> sous launcher</p>
                    </div>
                    <nav>
                        <ul>
                            <li>
                                <a href="#">Accueil</a>
                                <p>Page d'accueil</p>
                            </li>
                            <li>
                                <a href="#">Forum</a>
                                <p>Communautaire</p>
                            </li>
                            <li>
                                <a href="#">Jouer</a>
                                <p>Nous Rejoindre</p>
                            </li>
                        </ul>
                    </nav>
                </div>
            </section>
            <section id="bottom-info">
                Vous avez un problèmes? Contactez-nous sur le Teamspeak. <span>ts.menoria.com</span>
            </section>
        </header>
    </body>
</html>

＆＃13;

<div class="course-menu-container">
    <md-tab-group (selectChange)="onLinkClick($event)"
              [selectedIndex]="selectedTab">
       <md-tab label="Announcements"></md-tab>
       <md-tab label="Assignments"></md-tab>
    </md-tab-group>
</div>
<div>
    <router-outlet></router-outlet>
</div>

＆＃13;

onLinkClick(e : any) {
    switch (e.index) {
    case 0:
       this.router.navigate(['announcements'], { relativeTo: this.thisRoute });
       break;
    case 1:
       this.router.navigate(['assignments'], { relativeTo: this.thisRoute });
       break;
    default:
       break;
 }
}

＆＃13;

Answer 2

您的方法应该可以使用，但是您使用了错误的单位来处理css height属性。它不是vh，它是视图高度的缩写。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<style>
    #console, body {
        height: 100vh;
    }
</style>
<div id="console" class="row bg-dark text-white mh-100">
<div class="col">
    Rohan Khajuria
</div>
</div>

Answer 3

在#console CSS中，而不是height：100hv;将hv改为vh。

这

#console {
  height: 100hv;
  font-style: italic;
}

要

#console {
  height: 100vh;
  font-style: italic;
}

如何使用Bootstrap 4使Div与屏幕大小相同

3 个答案: