Angular Material固定工具栏和粘性页脚

一段时间以来,我一直在反对这个问题,有点想出一个解决方案.我想要一个固定的工具栏(导航栏)以及一个粘性(浮动)页脚.页脚应浮动在主要部分的底部,但在没有内容时会粘到底部.似乎我可以做一个或另一个,但不能两者兼而有之.使用此方法,工具栏是固定的,但页脚不粘.当主要部分为空时,它会对齐工具栏.

  

    
        

            HEADER
            
            onOff
            
            half/full
        
    


    
        

            
body {{card.title}}
            

            
footer item
        
  
               
  
    

下面的代码用作粘性页脚,但随后工具栏也会滚动.

  

    
        

            HEADER
            
            onOff
            
            half/full
        
    

    

      
body {{card.title}}
      

      
footer item
    
  
  
    

这似乎是适当的灵活方式来完成我想要做的事情,但我不能让它完美.

除了这种方法,我还使用了一种更传统的方法,使用计算出的主要截面高度来实现粘性页脚calc(100vh - header - footer).当BAM时,我几乎想到了它.角度材料决定使它们的工具栏大小随视口大小而变化.我可能会提出一个更改请求,以便我可以

我终于找到了问题所在.当在主要内容部分下嵌入div时,md-content在safari 上存在问题.我通过添加flex="none"到顶级div来修复它.

这仅适用于Chrome:

 

  

    
{{card.title}}
    
  
  

  
 

这适用于Chrome和Safari:

 

  

    
{{card.title}}