爲MD-工具欄

Question

CSS媒體查詢我有角材2a 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的MD-工具欄的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

我已經解決了這個-toolbar和md-progress bar作爲一個單元浮動header-div類。這樣，進度條始終位於工具欄下方，無論o f的大小

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