Question

我有一个来自Angular材料2的md工具栏，它固定在页面上

<md-toolbar id="floating-toolbar" color="primary"></md-toolbar>

<md-progress-bar *ngIf="true" class="floating-progress" mode="indeterminate" color="accent"></md-progress-bar

#floating-toolbar {
  position: fixed;
  z-index: 1001;
}

我想在固定的工具栏下方放置一个进度条。我发现AngularMaterial2的md工具栏高度根据屏幕宽度而变化。所以我通过查看视口

来痛苦地解决了以下问题

@media (max-width: 599px){
  .floating-progress {
    position: fixed;
    margin-top: 56px;
    z-index: 1002;
  }
}

@media (min-width: 600px) and (max-width: 650px){
  .floating-progress {
    position: fixed;
    margin-top: 64px;
    z-index: 1002;
  }
}


@media (min-width: 651px) and (max-width: 959px){
  .floating-progress {
    position: fixed;
    margin-top: 48px;
    z-index: 1002;
  }
}

@media (min-width: 960px) {
  .floating-progress {
    position: fixed;
    margin-top: 64px;
    z-index: 1002;
  }
}

这似乎仅适用于我桌面上的页面高度为全屏的情况。一旦我减小高度（以纵向模拟较小的屏幕或屏幕，这些规则就不再有效，因为工具栏的高度似乎是宽度和高度的变量。

有没有办法轻松解决这个问题，比如简单地将进度条卡在固定位置工具栏下方。

我在md-toolbar的scss文件中找到了这个可能会有帮助吗？

//toolbar.scss

$md-xsmall: 'max-width: 600px';
$md-small: 'max-width: 960px';

$md-toolbar-height-desktop: 64px !default;
$md-toolbar-height-mobile-portrait: 56px !default;
$md-toolbar-height-mobile-landscape: 48px !default;

$md-toolbar-font-size: 20px !default;
$md-toolbar-padding: 16px !default;


@mixin md-toolbar-height($height) {
md-toolbar {
    min-height: $height;
}
md-toolbar-row {
    height: $height;
}
}

md-toolbar {
display: flex;
box-sizing: border-box;

width: 100%;

// Font Styling
font-size: $md-toolbar-font-size;
font-weight: 400;
font-family: $md-font-family;

padding: 0 $md-toolbar-padding;

flex-direction: column;

md-toolbar-row {
    display: flex;
    box-sizing: border-box;

    width: 100%;

    // Flexbox Vertical Alignment
    flex-direction: row;
    align-items: center;
}
}

// Set the default height for the toolbar.
@include md-toolbar-height($md-toolbar-height-desktop);

// Specific height for mobile devices in portrait mode.
@media ($md-xsmall) and (orientation: portrait) {
  @include md-toolbar-height($md-toolbar-height-mobile-portrait);
}

// Specific height for mobile devices in landscape mode.
@media ($md-small) and (orientation: landscape) {
  @include md-toolbar-height($md-toolbar-height-mobile-landscape);
}

/*toolbar.css*/
md-toolbar,md-toolbar md-toolbar-row {
    display:flex;
    box-sizing:border-box;
    width:100%
}
md-toolbar{
    font-size:20px;
    font-weight:400;font-family:
    Roboto,"Helvetica Neue",sans-serif;
    padding:0 16px;
    flex-direction:column;
    min-height:64px
}
md-toolbar md-toolbar-row{
    flex-direction:row;
    align-items:center
}
md-toolbar-row{
    height:64px
}
@media (max-width:600px) and (orientation:portrait){
    md-toolbar{
        min-height:56px
    }
    md-toolbar-row{
        height:56px
    }
}
@media (max-width:960px) and (orientation:landscape){
    md-toolbar{
        min-height:48px
    }
    md-toolbar-row{
        height:48px
    }
}

Answer 1

我已经通过将md-toolbar和md-progress栏放在float-header-div类中作为一个单元解决了这个问题。这样，无论大小如何，进度条始终位于工具栏下方

<!--floating header-->
<div class="floating-header-div">
  <md-toolbar>
    <button md-icon-button class="ml-xs toolbar-button" (click)="sidenav.toggle()">
      <md-icon id="menu-icon">menu</md-icon>
    </button>
    <span id="app-title">MyApp</span>
  </md-toolbar>
  <md-progress-bar *ngIf="isLoading" mode="indeterminate" color="accent"></md-progress-bar>
</div>


/*------------------------------*/
/*tool bar*/
/*------------------------------*/
.floating-header-div {
  position: fixed;  
  z-index: 999;
  width: 100%;  
}

md-toolbar的CSS媒体查询

1 个答案: