角度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问题

回答

相关问题