我的 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>
慕仙森
相关分类