Question

我正在使用angularjs创建一个Web应用程序，我需要您的帮助来解决CSS问题我有几个嵌套div。我希望其中一个嵌套的div（我将在解释中调用＆＃34; myDiv＆＃34;以填充所有屏幕。）但这种配置适用于＆＃34; myDiv＆＃34;不应该影响他的嵌套孩子div。

这是一个非常简单的情况示例：

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

＆＃34; ...＆＃34;意味着随机内容。

默认情况下div内部＆＃34; myDiv＆＃34;将具有默认宽度/高度。（我没有给他们任何css所以宽度/高度的这些值将由父母的大小决定＆＃34; myDiv＆＃34;）
我希望这些默认值完全相同，但我想要＃34; myDiv＆＃34;填满所有屏幕。
就像填充一样，但没有改变屏幕上的显示，所以没有填充。

你有想法只用CSS或angularjs吗？

提前谢谢

Answer 1

选中此position: absolute or fixed可以提供帮助

＆＃13;

.myDiv{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
 }

＆＃13;

<div>
   <div>
      Some content here - This text will be hidden
      <div class="myDiv">
         ...
         <div>
            ...
            <div>...</div>
            ...
         </div>
         ...
      </div>
   </div>
</div>

＆＃13;

Answer 2

你可以试试这个

`<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;
}

使用位置绝对将从文档流中删除div，您可以调整它以填充整个视口。

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

2 个答案: