如何使div的相对于父DIV，而不是视口宽度的百分比(How to make div's p

这里是我一起工作的HTML 。

 <div id="outer" style="min-width: 2000px; min-height: 1000px; background: #3e3e3e;"> <div id="inner" style="left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1;"> <div style="background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px;"></div> </div> </div> 

我想发生这样的是内部的div占据给予其父DIV（外）的面积的50％。 取而代之的，是越来越可供视，这意味着作为浏览器/视在尺寸缩小了面积的50％，这样做的。

鉴于外div有min-width的2000px ，我希望的内格为至少1000px宽。

Answer 1:

指定非静态位置，例如position: absolute/relative节点上意味着它将被用作用于在其内绝对定位的元件的附图http://jsfiddle.net/E5eEk/1/

见https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Positioning_contexts

我们可以改变定位方面 - 这元素绝对定位的元素相对于定位。 这是通过对元素的祖先之一设置定位完成。

 #outer { min-width: 2000px; min-height: 1000px; background: #3e3e3e; position:relative } #inner { left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1; } #inner-inner { background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px; } 

 <div id="outer"> <div id="inner"> <div id="inner-inner"></div> </div> </div> 

Answer 2:

使用位置：相对父元素。

还要注意的是，你有没有添加任何位置属性，以任何你不会看到这种行为的div的。 胡安进一步解释。

文章来源: How to make div's percentage width relative to parent div and not viewport