角度4中的Flexbox問題

我需要固定標題和固定側邊欄..我在另一個html css中使用flexbox進行此操作。我的作品非常完美。角度4中的Flexbox問題

我將代碼粘貼在這裏

<body> 
    <header> 
     header 
    </header> 

    <section id="content"> 
     <div class="sidebar" style="color: #fff"> 
      sidebar 
     </div> 
     <div id="main_content"> 
      content 
     </div> 
    </section> 
</body>

SCSS

html, body { 
    height: 100%; 
} 

header { 
    background-color: yellow; 
    height: 80px; 
} 

#content { 
    background-color: #ccc; 
    flex: 1; 
    overflow: auto; 
    display: flex; 
} 
.sidebar { 
    width: 200px; 
    background-color: #000; 

} 
#main_content { 
    flex: 1; 
    width: 100%; 
    overflow: auto; 
} 

body { 
    display: flex; 
    flex-direction: column; 
}

但是，當我將此代碼angular4 ..它不工作，它讓我發瘋。這是report.component.html

<header> 
    <app-header></app-header>  
</header> 

<section id="content"> 
    <div class="sidebar"> 
     <app-aside></app-aside> 
    </div> 
    <div id="main_content"> 
     <app-content></app-content> 
    </div> 
</section>

在style.scss

我的角碼

我申請的風格，我寫erlier ..

在report.component.scss我寫了什麼.. 請幫我如果你想檢查這個問題，使用angular-cli製作一個projet並看到問題

來源

2017-05-10 Vugar Ahmadov

內部報表組件將所有元素包裝到div與類「flex容器」比使div 「顯示：柔性」。這可能會幫助你;）

來源

2017-05-12 07:21:51

它的工作就像一個魅力）謝謝你！ –

角度4中的Flexbox問題

回答

相關問題