Wrapper 不会占用全部空间
我的 css 包装类仅适用于显示的内容。我正在使用 Angular 并在我的 html 中有一个 *ngIf 以在从我的下拉列表中选择选项后显示一些卡片。选择选项并显示卡片后，我的包装（红色背景）将扩展以应用于现在显示的卡片。
无论如何，我希望我的包装纸从上到下始终可见。我对宽度很满意，因为它看起来像我想要的那样。
这里的结构如下：“index.html”包含“app.component.html”，其中包含“venues.component.html”。
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>
人到中年有点甜1回答
-
慕仙森
解决方案是将高度 100% 添加到 .wrapper 类
随时随地看视频慕课网APP
相关分类
JavaScript