Wrapper 不会占用全部空间

我的 css 包装类仅适用于显示的内容。我正在使用 Angular 并在我的 html 中有一个 *ngIf 以在从我的下拉列表中选择选项后显示一些卡片。选择选项并显示卡片后,我的包装(红色背景)将扩展以应用于现在显示的卡片。

无论如何,我希望我的包装纸从上到下始终可见。我对宽度很满意,因为它看起来像我想要的那样。

这里的结构如下:“index.html”包含“app.component.html”,其中包含“venues.component.html”。

http://img4.mukewang.com/629c0a2e0001b38116530838.jpg

http://img.mukewang.com/629c0a3600015f5916670882.jpg

CSS:


html, body {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

  /* background-color: rgb(223, 223, 223); */

}


.wrapper {

  margin: 0 auto;

  width: 1000px;

  background-color: red;

}

索引.html:


<!doctype html>

<html>

<head>

<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">

<link rel="stylesheet" href="styles.css">

  <meta charset="utf-8">

  <title>Whoknows</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <script>

    var global = global || window;

    var Buffer = Buffer || [];

    var process = process || {

      env: { DEBUG: undefined },

      version: []

    };

  </script>

</head>

<body>

  <div class="wrapper">

    <app-root></app-root>

  </div>

</body>

</html>

app.component.html


<html>

  <!-- <app-nav></app-nav> -->

  <body>

    <div class="wrapper">

      <div class="homeMessage lead">

        <p>Select which venues you'd like to see shows for</p>

      </div>

      <br>

      <app-venue-cards></app-venue-cards>

    </div>

  </body>

</html>


人到中年有点甜
浏览 147回答 1
1回答

慕仙森

解决方案是将高度 100% 添加到 .wrapper 类
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript