代码之家  ›  专栏  ›  技术社区  ›  samyb8

右侧的CSS列,与容器高度相同

  •  2
  • samyb8  · 技术社区  · 12 年前

    我有一个容器,里面有两个div。一个位于容器的左侧,第二个(rightBarItems)应该位于右侧,但我希望它的高度与容器的高度相同。基本上,我在右边创建一个专栏。

    HTML格式:

    <div class="container">
            <div class="itemMain"><?php include("itemMain.php"); ?></div>
            <div class="rightBarItems"><?php include("rightBarItems.php"); ?></div>
    </div>
    

    CSS格式:

    .container {
        overflow: hidden;
        background: white;
        padding-right: 20px;
        -webkit-box-shadow: 4px 2px #492409,  -4px 0 2px #492409;
        -moz-box-shadow: 4px 0 2px -6 #492409,  -1px 0 2px #492409;   
        box-shadow: 4px 0 2px  #492409,  -4px 0 2px #492409;
    }
    
    2 回复  |  直到 12 年前
        1
  •  2
  •   Olli Tyynelä    12 年前

    两种解决方案(两者都有各自的问题)

    第一:

    1) 相对于容器的位置 2) 并使左侧元素浮动。 3) 绝对定位右侧元素,并设置其顶部:0,底部:0,右侧和宽度

    当然,问题是左边的内容应该大于右边的内容

    第二个(如果你能在html中添加更多的元素): 1) 相对于容器的位置 2) 浮动左右容器 3) 为右侧元素创建一个新的div,即“bg” 4) 位置绝对,与前面相同:右:0,上:0,下:0和宽度 5) 如有必要,调整z索引

    :O

    编辑:

    后一种溶液的快速取样: http://jsbin.com/ecaced/1

        2
  •  0
  •   Kwon    12 年前

    height: auto; height: 100%; 应该起作用。