时间戳

首页 > 解决方案 > 将 DIV 设为祖父母的 100% 高度，同时拉伸祖父母的宽度

html - 将 DIV 设为祖父母的 100% 高度，同时拉伸祖父母的宽度

问题描述

我在以下结构中有一些 DIV：

<div id="R">
    <div id="GA"></div>
    <div id="GP">
        <div id="P">
            <div id="C"></div>
        </div>
    </div>
</div>

R有display:flex,flex-direction:row和align-items:stretch. 它还占据了所有可用的屏幕空间，除了左侧的导航菜单和顶部的标题栏。GA设置为flex-grow:1，GP设置为flex-grow:0。两者结合占据了R的所有高度和宽度。P没有显着的样式，但是由于 X 原因（*），我不能向它添加任何 CSS（它实际上不是一个，而是一堆嵌套的 DIV，同样，没有相关的样式）。C里面有一堆东西给它它的宽度，但它的高度比GP的小。没有元素的高度或宽度设置为实际数字。

现在问题来了。我需要C具有GP的 100% 的高度，但GP的宽度需要被C拉伸。

编辑：一个例子的jsfiddle。

这可以通过应用样式来DIV#GA > DIV强制P填充GP的高度来完成，这使得垂直拉伸C变得微不足道。但我想知道是否有办法只通过造型GP和C来做到这一点。

尝试了几个小时，似乎没有任何效果。

(*) C是一个组件，我使用的开发工具将其作为与实际页面分开的对象。主页只有GP的结构。在构建项目时，该工具将一些 DIV 放入GP中，然后将组件 ( C ) 放入其中。P最终拥有自己无法更改的类和 ID。这些也被其他元素使用（在同一页面中用于类，其他用于 id），因此我无法在不触及其他元素的情况下使用自己的 CSS 来定位它们。

标签： htmlcss

解决方案

干货解释：

  • 制作GP display: flex，因为它的子元素会因为 CSS 默认而被拉伸align-items: stretch
  • 这会将P拉伸到GP flexbox 行高，独立于flex-grow（= 默认值：0，因为 FBL 父级默认为“行”，子flex-grow级仅影响其宽度的拉伸）=> P高度 = GP高度
  • 使C height: 100% as P现在有一个高度C可以参考（即GP的高度）。=> C height: 100% = 高度P = 高度GP
  • GP宽度必须取决于C宽度。由于我们不知道P做什么，C不能有百分比宽度（取决于父级），所以要么给C一个视口依赖单元 vw/vh/vmin/vmax，要么 calc(...) 一个宽度等. 或固定单位。在片段中.C { width: 10vw; }
  • 这将使C将其宽度强加在P上，并且由于GPalign-items的原因，也会在GP上

（……你以为你很神秘……）

幸运的是，该片段被大量评论。顺便说一句，我添加了一些额外的 HTML/CSS 来获得类似于“实时”页面的内容。另外：我将 ID 更改为类。

.cardList { /* list of ... cards */
    background-color: rgba(0,0,0,.1); padding-top: 1rem
}
.card { /* some main container holding an R */
    position: relative; /* stacking context for .R */

    width: 40vw; /* some arbitrary width/height/spacing */
    height: calc(0.5265 * 40vw);
    margin-bottom: 1rem;
}


.R {
  display: flex;
  position: absolute;

  top   : 0;
  bottom: 0;
  left  : 0;
  right : 0;

/*  align-items: stretch; /* REMOVE, flex default */
}

.GA {
  flex-grow: 1;
  background-color: blue;
}

.GP {
/*  flex-grow: 0; /* REMOVE, flex default */

  /* ADD, make GP a flex-container so it has 'align-items: stretch'
          this will stretch P giving C a height it can reference
  */
  display: flex;

  background-color: red;
  padding: 15px;

  /* ADD [optional], but GP size will be limited by R,
     so, what to do when it overflows? Right, scrollbars (or ellipses..., w.e.)
     And excess content of C has to go somewhere as its height is GP depended
  */
  overflow: auto;
}

.P { /* CAN'T CHANGE THIS */ }

.C {

  /* ADD, with some test value */
  width: 10vw;
  /* Will force GP width as P has default 'width: auto; height: auto'.
     Has to be a 'hard' (relative or px) width to force P and therefore GP,
     percentages won't work as that would be based on parent */

  height: 100%;
  /* GP is flex with default 'align-items: stretch'
     this will stretch P
     if P is 'stretched' then C has a reference size, so it can go 100%
     which is full size of GP (minus GP padding, etc...)
  */


  background-color: yellow;
}

.some-content {
  width: 50px;
  height: 300px;
  background-color: green;
}


/**************************************/
/* my personal preferred global rules */
/**************************************/
html,body               { box-sizing: border-box; width: 100%; max-width: 100% }
*::before,*::after, *   { box-sizing: inherit }
body                    { margin: 0 }
/*

    All math reference:  https://www.mathsisfun.com/equation_of_line.html

*/
/* responsive base font size using y = mx + b */
html   { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */

[band] { display: flex; flex-flow: column wrap; 
         justify-content: center; align-content: center; align-items: center }

body[padded="1"],
body[padded="0"] [band*="padded"] {
/*
    responsive page padding
    and responsive band padding (same as responsive page padding, but at band level)
    p1(320,32) p2(1920, 72) => 0.025x + 24
    p3(320, 8) p4(1920,320) => 0.195x - 54.4 

    'Band padding' is only active when 'page padding' is off 
*/
    padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px);
}
/* for debugging */
[outlines="1"] * { outline: 1px dashed }
<body outlines="1" padded="1">
<div class="cardList" band>
    <div class="card">
        <div class="R">
          <div class="GA"></div>
          <div class="GP">
            <div class="P"> <!-- CAN'T CHANGE THIS ELEMENT-->
              <div class="C">
                <div class="some-content">
                </div> <!-- PACEHOLDER FOR CONTENT-->
              </div>
            </div>
          </div>
        </div>
    </div>
    <div class="card">
        <div class="R">
          <div class="GA"></div>
          <div class="GP">
            <div class="P"> <!-- CAN'T CHANGE THIS ELEMENT-->
              <div class="C">
                <div class="some-content">
                </div> <!-- PACEHOLDER FOR CONTENT-->
              </div>
            </div>
          </div>
        </div>
    </div>
</div>
</body>

推荐阅读