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>

在.background

添加了css类app.component.css

.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%;
}

这就是你追求的目标吗？

这是我向下移动时的屏幕

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

1 个答案: