垂直扩展div容器以适应另一个

我在其他问题中尝试了很多示例，但似乎没有一个适用于我。我只是试图创建一个边栏宽度为100px的div容器，并且如果它动态增长，它将随容器垂直展开。见下文;内部的div只是当我设置高度为100％垂直扩展div容器以适应另一个

enter image description here

我的CSS看起来这甚至不会成长;

<style> 
    #outer { 
     border:10px solid #7A838B; 
     margin:10px; 
     border-radius:30px; 
     max-width:500px; 
     min-height:200px; 
    } 

    #leftblock { 
     background-color:#7A838B; 
     width:100px; 
     height:auto; 
     border-top-left-radius:20px; 
     border-bottom-left-radius:20px; 
     margin-left:-10px; 
     margin-top:-10px; 
    } 
    #inner { 
     color:white; 
     height:100%; 
    } 
    </style>

和我的HTML是这样的;

<div id="outer"> 
     <div id="leftblock"> 
      <div id="inner"> 
       Test 
      </div> 
     </div> 
    </div>

来源

2014-08-31 Alastair W

你有100％身高的孩子。完全是什么高度的100％？家长没有身高，而祖父母只有一个最小高度组。（这与设置高度不一样）如果你可以更具体一点你想要内部div的高度，那么我可能会多一点帮助。但是现在，您基本上将高度设置为0的100％。 – Antiga 2014-08-31 00:42:25

谢谢您的回复。正如我在描述中所说的，我试图将左侧的块设置为相同的高度，即触摸祖父母容器的顶部和底部。我不希望祖父母容器小于200像素，所以我设置了最小高度。父级（左侧块）容器设置为根据内部块延伸到什么高度自动扩展。即使我将所有三个都设置为100％，内部块仍保持在文本的高度。 – 2014-08-31 01:14:26

它去为@mmeverdies说，

为了设置高度：100％，家长必须建立一个定义的高度太多，但如果高度属性值是“继承”，则祖父母必须将其。等等。

你基本上有两个选择，要么：

1）定义父元素的确切高度。那么100％的孩子身高就会起作用。

2）用position: absolute这样拉伸子元素：http://jsfiddle.net/r02nbmd9/ - 注意父子代的position: relative和孩子的position: absolute。

<div class="parent"><div class="child"></div></div> 

<style> 
.parent { 
    position: relative; 
    width: 300px; min-height: 200px; 
    background: yellow; 
} 
.child { 
    position: absolute; top: 0; bottom: 0; 
    width: 100px; 
    background: red; 
} 
</style>

来源

2014-08-31 04:29:52

你是明星！工作过一种享受。谢谢！ – 2014-08-31 20:53:17

为了设置高度：100％，家长必须建立一个定义的高度太多，但如果高度属性值是“继承”，则必须祖父母设置。等等。

了解它看看这个CSS。

例如：浏览器的全高。

html, body { 
    height: 100%; 
} 
#outer { 
    height: 100%; 
} 
#leftblock { 
    height: 100%; 
} 
#inner {  
    height:100%; 
}

默认情况下，HTML高度为0的话，你必须高度财产比至少一名家长的“继承”设置为其他。

来源

2014-08-31 04:07:48

垂直扩展div容器以适应另一个

回答

相关问题