Angular Material 2 - 网站无法正确呈现全屏

Question

我正在尝试稍微重写我的应用程序。过去我只使用 Sidenavs 创建应用程序，但现在我正在处理的网站中不需要它。问题是我似乎无法找到一种方法来删除 sidenav 容器而不破坏背景图像、导航栏粘滞等。我似乎在 material.angular.io 上找不到任何指向任何东西的东西像这样或者可以解决这个问题。

如果有人知道如何解决此问题，请指出我的文档/我可以更改哪些内容来解决此问题。

Github for the site

使用 Mat-Sidenav-Container

Sidenav 容器作为 div

带有从 sidenav 容器中获取的 css 的 div

Answer 1

这是一个快速修复

app.component.html

<!-- <mat-sidenav-container fullscreen class="sidenav-container"> -->
<!-- <mat-toolbar class="toolbar"> -->
<!-- <div class="social-media" id="discord" (click)="navigateToDiscord()"> -->
<!-- <img src="../../assets/discord.png"> -->
<!-- </div> -->
<!--  -->
<!-- <div class="social-media" (click)="navigateToTwitch()"> -->
<!-- <img src="../../assets/twitch.png"> -->
<!-- </div> -->
<!--  -->
<!-- <div class="social-media" (click)="navigateToTwitter()"> -->
<!-- <img src="../../assets/twitter.png"> -->
<!-- </div> -->
<!--  -->
<!-- <div class="social-media" (click)="navigateToYoutube()"> -->
<!-- <img src="../../assets/youtube.png"> -->
<!-- </div> -->
<!--  -->
<!-- <div class="themeathon-name"> -->
<!-- <div class="name-span"> -->
<!-- <span>THEMEATHON</span> -->
<!-- </div> -->
<!-- </div> -->
<!-- </mat-toolbar> -->
<!--  -->
<!-- <stream-component></stream-component> -->
<!--  -->
<!-- </mat-sidenav-container> -->



<div class="background">

    <div class="toolbar">
        <div class="social-media-container">
            <div class="social-media" id="discord" (click)="navigateToDiscord()">
                <img src="../../assets/discord.png">
            </div>

            <div class="social-media" (click)="navigateToTwitch()">
                <img src="../../assets/twitch.png">
            </div>

            <div class="social-media" (click)="navigateToTwitter()">
                <img src="../../assets/twitter.png">
            </div>

            <div class="social-media" (click)="navigateToYoutube()">
                <img src="../../assets/youtube.png">
            </div>
        </div>

        <div class="themeathon-name">
            <div class="name-span">
                <span>THEMEATHON</span>
            </div>
        </div>
    </div>
    <stream-component></stream-component>
</div>

在app.component.css处添加了css类.background

.background {
    background-image: url(../../assets/japan.jpg);
}
 .toolbar {
    top: 0;
    position: sticky;
    position: -webkit-sticky;
    z-index: 50;
    width: 100%;
    background-color: black;
    height: 70px;
}

.social-media-container,
.themeathon-name {
    position: absolute;
    top: calc(50% - 16px);
}

.social-media {
    padding-top: 6px;
    margin: 0 25px;
    cursor: pointer;
    display: inline;
}

.social-media img {
    fill: #fff;
    width: 32px;
    height: 32px;
}

.social-media-text {
    float: right;
    margin-left: 6px;
}

.themeathon-name {
    width: 100%;
    text-align: center;
}

.themeathon-name span {
    font-family: SAMURAI, Roboto, "Helvetica Neue", sans-serif;
    font-size: 32px;
    color: #fff;
    letter-spacing: 10px;
    display: block;
    margin: auto 26%;
}

这就是你所追求的吗？

这是我向下移动时的屏幕