각도 4의 플렉스 박스 문제

고정 헤더와 고정 사이드 바를 가져야합니다. 다른 html CSS에서이 작업을하고 있습니다. 나는 완벽하게 작동합니다.각도 4의 플렉스 박스 문제

는 여기

<body> 
    <header> 
     header 
    </header> 

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

하는 SCS

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.scss에서

.. 내가 erlier 쓴 스타일을 적용 style.scss에

<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>

report.component.html

내 각 코드

입니다 .. 도와주세요 이 문제를 확인하려면 각도 cli로 프로 용지를 만들고 문제를 확인하십시오.

출처

2017-05-10 Vugar Ahmadov

내부 보고서 구성 요소가 div로 모든 요소를 줄 바꿈합니다. "flex-container"클래스를 사용하여 "display : flex".

출처

2017-05-12 07:21:51

감사합니다. –

각도 4의 플렉스 박스 문제

답변

관련 문제