html - 如何在不影响嵌套 div 默认大小的情况下更改 div？

Question

我正在使用 angularjs 创建一个网络应用程序，我需要你的帮助来解决 css 问题。
我有几个嵌套的 div。我想要其中一个嵌套的 div(我将在解释中称之为“myDiv”)填满整个屏幕。
但是“myDiv”的这个配置不应该影响他的嵌套子div。

这里有一个非常简单的例子:

<div>
   <div>
      <div class="myDiv">
         ...
         <div>
            ...
            <div>...</div>
            ...
         </div>
         ...
      </div>
   </div>
</div>

“...”表示随机内容。

默认情况下，“myDiv”内的 div 将具有默认宽度/高度。 (我没有为它们放置任何 css，所以这些宽度/高度值将由父“myDiv”的大小决定)
我希望这些默认值完全相同，但我希望“myDiv”填满整个屏幕。
就像填充一样，但不改变屏幕中的显示，所以不是填充。

您是否有想法只使用 CSS 或使用 angularjs 来做到这一点？

提前致谢

Answer 1

你可以试试这个

`<div>
 <div>
 <div class="myDiv">
 <div>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting       industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     </div>
      <div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
  </div>
  </div>
  </div>`

使用 CSS

div.myDiv{
position: absolute;
top: 0%;
bottom:0%;
left: 0%;
right: 0%;
background-color: #f4f4f4;
}

使用 Position Absolute 将从文档流中移除 div，您可以调整它的大小以填充整个视口(viewport)。