중첩 된 웹 구성 요소 사용자 정의 요소의 높이를 지정하여 할당 된 공간을 올바르게 채우는 방법은 무엇입니까?

enter image description here 아래 HTML은 포함 된 기본보기 (응용 프로그램 페이지)의 영역에서 해당 공간 내에 중첩 된 하위 사용자 정의 요소를 사용하여 높이를 100 % 정확하게 채우는 간단한 예제에서 복사 한 것입니다. (응용 프로그램은 pub에서 다운로드 한 다트 - 폴리머 패키지를 사용합니다.) 컨테이너는 Polymer의 레이아웃 속성 (플렉스 모델)을 사용하여 구현됩니다. 간단한 맞춤 요소 (텍스트 콘텐츠)는 #left div 요소에 중첩되어 있습니다. W3C Grid Layout을 사용하는보다 복잡한 사용자 정의 요소는 #right div 요소에 중첩됩니다. #right의 네 직사각형은 my-gridcontent의 높이가 공간을 오버 플로우하는 것을 제외하고는 올바르게 렌더링되고 채색됩니다.중첩 된 웹 구성 요소 사용자 정의 요소의 높이를 지정하여 할당 된 공간을 올바르게 채우는 방법은 무엇입니까?

[편집 : 스크린 샷은 제가보고있는 것입니다. 원하는 것이 아닙니다. #left와 my-gridcontent를 오버레이하여 #right를 오버레이하기 위해 내 간단한 콘텐츠를 원합니다. 스크롤바가 없어야합니다.]

Devtools는 #left와 #right의 높이가 562px, my-simplecontent가 18px, my-gridcontent가 626px로 표시됩니다. 중첩 된 구성 요소의 너비가 예상대로 각각의 공백을 채 웁니다. 나는 {display : block; 높이 : 100 %} 다양한 요소가있는 규칙.

다트 SDK : 1.7.2. Dartium : 37.0.2062.120 (292122)

pubspec.yaml

dependencies: 
    # Dart Polymer and essential libraries 
    polymer: ">=0.15.0 <0.16.0" 
    core_elements: ">=0.3.1 <0.4.0" 
    paper_elements: ">=0.4.0 <0.5.0" 
    web_components: ">=0.7.0 <0.8.0"

index.html을

<!DOCTYPE html> 

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>My App</title> 

    <!-- include the web_components polyfills with support for Dart. --> 
    <script src="packages/web_components/platform.js"></script> 
    <script src="packages/web_components/dart_support.js"></script> 
    <link rel="import" href="packages/core_elements/core_icons.html"> 
    <link rel="import" href="packages/polymer/polymer.html"> 
    <link rel="import" href="packages/core_elements/core_toolbar.html"> 
    <link rel="import" href="packages/paper_elements/paper_icon_button.html"> 

</head> 
<body unresolved fullbleed> 

<polymer-element name="my-app" noscript vertical layout> 
    <template> 
     <style type="text/css"> 
      :host { width: 100%; height: 100%; } 

      div#left { background: lightyellow; } 
      div#right { background: lightblue; } 

     </style> 

     <core-toolbar id="appToolbar"> 
      <paper-icon-button id="navmenu" icon="menu"></paper-icon-button> 
      <div flex>App</div> 
      <paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button> 
     </core-toolbar> 

     <div horizontal layout flex> 
      <div id="left" flex> 
       <my-simplecontent id="simple"></my-simplecontent> 
      </div> 
      <div id="right" flex> 
       <my-gridcontent id="grid"></my-gridcontent> 
      </div> 

     </div> 

    </template> 
</polymer-element> 

<polymer-element name="my-simplecontent" noscript> 
    <template> 
     <style type="text/css"> 
      :host { display: block; height: 100%; background: lightcoral; } 
     </style> 

     Simple content 
    </template> 
</polymer-element> 

<polymer-element name="my-gridcontent" noscript> 
    <template> 
     <style type="text/css"> 
      :host { 
       display: grid; height: 100%; 
       grid-template-columns: 1fr 1fr; 
       grid-template-rows: 1fr 1fr; 
      } 
      #a { grid-column: 1; grid-row: 1; } 
      #b { grid-column: 2; grid-row: 1; } 
      #c { grid-column: 1; grid-row: 2; } 
      #d { grid-column: 2; grid-row: 2; } 

      div { height: 100%; } 

      .red { background: red; } 
      .blue { background: blue; } 
      .green { background: green; } 
      .yellow { background: yellow; } 
     </style> 

     <div id="a" class="red">A</div> 
     <div id="b" class="blue">B</div> 
     <div id="c" class="green">C</div> 
     <div id="d" class="yellow">D</div> 

    </template> 
</polymer-element> 


<my-app></my-app> 

<!-- bootstrap polymer --> 
<script type="application/dart">export 'package:polymer/init.dart';</script> 
<script src="packages/browser/dart.js"></script> 
</body> 
</html>

출처

2014-10-19 wjohnson

이 전체 브라우저 창을 채우고 스크롤 막대를 표시하지 않습니다. 나 한테 잘됐다. 마커가있는 스크린 샷을 현재와 다른 방식으로 추가 할 수 있습니까? (Dartium'Version 38.0.2125.0 (292384) (64-bit)'와 Chrome'Version 38.0.2125.104 (64-bit)'에서 사용). –

@ GünterZöchbauer : 스크린 샷이 추가되었습니다. 내가 설명하는 레이아웃이 아닌 Chrome v38에서 동일한 레이아웃을 얻습니다. 나는 안정된 DE/Dart SDK를 사용하지만 Dartium v38에 대한 테스트를 위해 dev 채널 배포를 진행 중입니다 (배포판에 있다고 가정). OSX 10.10. – wjohnson

@ GünterZöchbauer : OSX 용 64 비트 Dartium v38에 대한 배포판을 찾을 수 없습니다. dev 채널 빌드를위한 링크는 dartium-macos-ia32-release.zip입니다. 제발 조언. – wjohnson

내가 제일 상호 작용의 최상위 패널을 지정하는 방법이었다 탐구 한 근본적인 문제 한 페이지짜리 웹 응용 프로그램이므로 중첩 된 구성 요소의 내용에 관계없이 지정된 비율이 변경되지 않습니다. (The motivation is in Section 1.2 of the CSS Grid Layout Module Level 1: Adapting Layouts to Available Space.) 가장 예측 가능한 결과를 산출하는 방법은 CSS 그리드 레이아웃 시스템을 사용하고 최상위 레벨에서 구부리지 않는 것이 었습니다. flex 시스템 하에서, 레이아웃은 컨테이너의 자식 컨텐츠에 의존하는 것처럼 보였다. 최신 HTML 레이아웃 모듈과 CSS 딥 결합 자 규칙이 요소, 구성 요소 및 섀도우 DOM을 통해 상호 작용하여 레이아웃을 수행하는 방법에 대한 개념적 프레임 워크가 아직 없기 때문에 더 나은 접근법이 될 수 있습니다. 그러나 아래 확장 코드의 메서드는 예상대로 작동했습니다.

index2.html

!DOCTYPE html> 

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>My App</title> 

    <!-- include the web_components polyfills with support for Dart. --> 
    <script src="packages/web_components/platform.js"></script> 
    <script src="packages/web_components/dart_support.js"></script> 

    <link rel="import" href="packages/polymer/polymer.html"> 
    <link rel="import" href="packages/core_elements/core_toolbar.html"> 

    <polymer-element name="my-flex-element" noscript> 
     <template> 
      <style type="text/css"> 
       :host { 
        display: flex; flex-direction: column; height: 100%; 
       } 
       #r1 { flex-grow: 1; background: lightgreen; } 
       #r2 { flex-grow: 1; background: lightpink; } 
      </style> 
      <div id="r1">col-2 one</div> 
      <div id="r2">col-2 two</div> 
     </template> 
    </polymer-element> 

    <polymer-element name="my-flex-element2" vertical layout noscript> 
     <template> 
      <style type="text/css"> 
       :host { height: 100%; } 
       #r1 { background: lightgreen; } 
       #r2 { background: lightpink; } 
      </style> 
      <div id="r1" flex>col-4 one</div> 
      <div id="r2" flex>col-4 two</div> 
     </template> 
    </polymer-element> 

    <polymer-element name="my-grid-element" noscript> 
     <template> 
      <style type="text/css"> 
       :host { 
        display: grid; height: 100%; 
        grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; 
       } 
       #r1 { grid-column: 1; grid-row: 1; background: lightgreen; } 
       #r2 { grid-column: 1; grid-row: 2; background: lightpink; } 
      </style> 
      <div id="r1">col-3 one</div> 
      <div id="r2">col-3 two</div> 
     </template> 
    </polymer-element> 

    <polymer-element name="my-app" noscript> 
     <template> 
      <style type="text/css"> 
       :host { 
        display: grid; 
        grid-template-columns: 1fr; grid-template-rows: auto 1fr; 
        width: 100%; height: 100%; 
       } 

       #main { 
        display: grid; height: 100%; 
        grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; 
        grid-column: 1; grid-row: 2; 
       } 

       #col1 { 
        grid-column: 1; grid-row: 1; 
       } 
       my-flex-element { 
        grid-column: 2; grid-row: 1; 
        background: lightblue; 
       } 
       my-grid-element { 
        grid-column: 3; grid-row: 1; 
        background: lightyellow; 
       } 
       my-flex-element2 { 
        grid-column: 4; grid-row: 1; 
        background: gold; } 

      </style> 

      <core-toolbar id="appToolbar"> 
       <div>App</div> 
      </core-toolbar> 

      <div id="main"> 

       <!-- column 1: html inline component --> 
       <style type="text/css"> 
        #inline { 
         display: grid; height: 100%; 
         grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; 
         background: #fcfcfc; 
        } 
       </style> 
       <div id="inline"> 
        <style type="text/css"> 
         #r1 { grid-column: 1; grid-row: 1; background: lightgreen; } 
         #r2 { grid-column: 1; grid-row: 2; background: lightpink; } 
        </style> 
        <div id="r1">col-1 one</div> 
        <div id="r2">col-1 two</div> 
       </div> 

       <!-- column 2: polymer + css flex module --> 
       <my-flex-element></my-flex-element> 

       <!-- column 3: polymer + css grid module --> 
       <my-grid-element></my-grid-element> 

       <!-- column 4: polymer + polymer flex layout attributes --> 
       <my-flex-element2></my-flex-element2> 

      </div> 
     </template> 

    </polymer-element> 

</head> 
<body unresolved fullbleed> 


<my-app></my-app> 

<!-- bootstrap polymer --> 
<script type="application/dart">export 'package:polymer/init.dart';</script> 
<script src="packages/browser/dart.js"></script> 

</body> 
</html>

enter image description here

출처

2014-10-22 01:50:49 wjohnson

중첩 된 웹 구성 요소 사용자 정의 요소의 높이를 지정하여 할당 된 공간을 올바르게 채우는 방법은 무엇입니까?

답변

관련 문제