html - 如何处理DIV位置和高度

Question

我一直在处理页面中 DIV 的位置。我为此添加了一张图片

http://www.tiikoni.com/tis/view/?id=0e90b7f

主要是，我有一个名为 (A) 的容器 DIV，在里面我想要一个名为 (B) 的 DIV 完全向右对齐，我将在父容器 DIV 中有许多名为(C 等...)的 DIV，但它们都在左侧。

我想要的是右侧名为(B)的DIV必须与图片中的DIV(A)保持一致，并且其高度与带有CSS的容器DIV(A)相同。有可能吗？

我尝试将此 CSS 用于我的 DIV (B):

.panelB{
    float: right;
    display: block;
    width: 310px;
    height: 100%;
    overflow-y: auto;
}

如果我添加另一个包含左侧所有迷你 div 的 DIV，我可以解决这个问题，但我不能仅使用 CSS 更改此设计。那么，我怎样才能让左边的所有独立 div 尊重一个谨慎的空间，并将右边的面板 (B) 留在右边。

我忘了说，在 DIV (B) 中还有一些迷你 div，用户可以将它们添加到名为 (A) 的主容器 div 中。我的意思是，B 上有一个 DIV，用户单击它会自动在左侧添加它(这意味着主容器 (A))所以当 DIV (B) 开始失去一个 div 时，它会失去它的高度和所有添加到容器上的div开始代替DIV(B)

Answer 1

如果你想让 .panelB 的高度扩展/收缩到 C block 元素的总高度堆栈，你可以 absolute position .panelB到屏幕右侧，设置其父位置为relative，并添加一个padding-right: width of .panelB，像这样 ( demo ):

*, *:before, *:after {
    box-sizing: border-box;
}
.wrap{
    position: relative;
    width: 100%;
    background: green;
    padding-right: 310px;/*width of .panelB*/
}
.a{
    border: 1px solid cyan;
    display: inline-block;
    padding: 20px;
    margin: 5px;
}
.right-panel{
    position: absolute;
    top: 5px; bottom: 5px;
    right: 5px;
    width: 310px;
    background: yellow;
    min-height: 50px;/*just in case*/
}