如何使div的百分比宽度相对于父div而不是视口 [英] How to make div's percentage width relative to parent div and not viewport

问题描述

这是我正在使用的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％的空间可用于视口，这意味着，随着浏览器/视口在尺寸收缩，所以。

What I would like to happen is for the inner div to occupy 50% of the space given to its parent div(outer). Instead, is is getting 50% of the space available to the viewport, which means that as the browser/viewport shrinks in size, so does it.

假设外部div具有 min-width of 2000px ，我希望内部div至少 1000px 宽。

Given that the outer div has min-width of 2000px, I would expect the inner div to be at least 1000px wide.

推荐答案

在节点上指定 position：relative; 或 position：absolute; 其中绝对定位元素的引用 http://jsfiddle.net/E5eEk/1/

Specifying position:relative;or position:absolute; on a node means that it will be used as the reference for absolutely positioned elements within it http://jsfiddle.net/E5eEk/1/

#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>

这篇关于如何使div的百分比宽度相对于父div而不是视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！