Angular 8 응용 프로그램에서 전체 뷰포트를 사용하려면 어떻게해야합니까?

debugcn 에 게시 Dev

Magnueil

navbar와 navbar에서 선택한 구성 요소를 표시하는 라우터 콘센트로 구성된 단일 페이지 응용 프로그램을 개발 중입니다. 기본적으로로드되는 기본 구성 요소는 navbar를 제외하고 전체 페이지를 채우고 싶은 Leaflet 맵입니다. 현재는 측면에 공백을 포함하도록 요구하기 때문에 전체 페이지를 채우는 주요 구성 요소도 얻을 수 없습니다. 컨테이너가 고해상도 배경 이미지를 갖도록 설정하여 실제로 얼마나 많은 공간을 채우고 있는지 확인할 수 있습니다.

불필요한 공백이 모두있는 메인 페이지

코드:

app.component.html

<body>
  <app-nav-menu></app-nav-menu>
  <div class="container" id="main-container">
    <router-outlet></router-outlet>
  </div>
</body>

styles.css

body {
height: 98vh;
width: 98vw;
}

html, body, .container {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#main-container {
  background-image: url("src/assets/chicago-wallpaper.jpg");
  width: 98vw;
  height: 94vh;
}

Magnueil

매튜 앨런은 당황스럽게도 간단한 대답을 제공 한 것 같습니다. 부트 스트랩은 .container에 최대 너비 규칙을 적용했으며 styles.css에서 "max-width : none"을 설정하면지도가 페이지를 채울 수 있습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

Angular 8 응용 프로그램에서 전체 뷰포트를 사용하려면 어떻게해야합니까?

Angular 8 응용 프로그램에서 전체 뷰포트를 사용하려면 어떻게해야합니까?

JSON 객체를 반환하는 API에서 Angular 8을 사용하여 데이터를 검색하려면 어떻게해야합니까?

타사 응용 프로그램에서 NetSuite로 데이터를 전송하려면 어떻게해야합니까?

전체 Qt 응용 프로그램에 대해 하나의 메뉴를 만들려면 어떻게합니까?

Windows 8에서 응용 프로그램간에 전환하려면 어떻게합니까?

모든 응용 프로그램 (시스템 전체)에 대해 Ctrl + Q를 비활성화하려면 어떻게해야합니까?

gradle의 응용 프로그램 플러그인으로 생성 된 시작 스크립트에서 프로그램 이름을 응용 프로그램에 전달하려면 어떻게해야합니까?

urlib를 사용하여 전체 웹 사이트를 다운로드하려면 어떻게해야합니까?

ASP.NET BoilerPlate : DbContext의 개체를 응용 프로그램 서비스에 삽입하려면 어떻게해야합니까?

본질적으로 상태 저장 프로그램에서 전역 변수를 사용하지 않으려면 어떻게해야합니까?

.NET Framework 3.5를 사용하여 Windows 8.1의 올바른 OS 버전을 감지하려면 C # 프로그램에서 어떻게해야합니까?

SUBSTITUTE를 사용하여 아포스트로피를 대체하려면 어떻게해야합니까?

Windows Forms MDI 응용 프로그램에서 전역 변수를 추적하려면 어떻게합니까?

lldb를 사용하여 중지 된 프로그램에서 계속하려면 어떻게해야합니까?

웹 응용 프로그램, 관리 사이트 및 웹 API를 Azure에서 하나의 웹 사이트로 병합하려면 어떻게해야합니까?

Angular 2 응용 프로그램에 캘린더 구성 요소를 삽입하려면 어떻게해야합니까?

Windows를 사용하여 PIP 모드에서 두 개의 응용 프로그램을 사용하려면 어떻게해야합니까?

그놈에서 배경 응용 프로그램 메뉴를 숨기려면 어떻게해야합니까?

옥타브 : 모든 프로그램에 전역 상수를 편리하게 사용하려면 어떻게해야합니까?

모든 뷰포트에서 응용 프로그램의 창 사이를 전환하는 키 조합

델리게이트를 사용하여 NSMutableArray에 객체를 추가하려면 어떻게해야합니까?

Mac OS에서 명령 줄 인수를 사용하여 응용 프로그램을 실행하려면 어떻게해야합니까?

JavaFX 데스크탑 응용 프로그램에서 Google Maps API를 사용하려면 어떻게해야합니까?

Postgres에서 다른 그룹으로 그룹화 된 최대 값을 사용하여 전체 레코드를 검색하려면 어떻게해야합니까?

채팅 프로그램에 대해 여러 사용자를 생성하려면 어떻게해야합니까?

제거 프로그램에 선택한 언어를 사용하려면 어떻게해야합니까?

BrowserRouter를 사용하여 React에서 이전 경로에 액세스하려면 어떻게해야합니까?

RNetLogo를 사용하여 에이전트 세트를 추출하려면 어떻게해야합니까?

목록의 숫자를 Python에서 내 사전의 키로 사용하려면 어떻게해야합니까?

FreeDOS에서 CF-IDE를 사용하여> 8Gb를 보려면 어떻게해야합니까?