Мой 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;
}
index. html:
<!doctype html>
<html lang="en">
<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>
venues.component. html:
