Question

当与边框图像结合使用以实现圆角时，我在制作相同高度的DIV时遇到了一些麻烦。我过去采用的方法是使div很长并且剪辑但是失去边界。

只要父容器具有特定高度（即以px为单位），100％高度就会起作用，但如果内容应该增长则会丢失文档流。任何想法如何做到这一点？

HTML

<div class="container">

    <div class="rounded-corner-frame">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula erat, hendrerit at ullamcorper eget, ultricies sit amet magna. Quisque id leo sed neque finibus auctor. Sed nisi orci, feugiat in felis nec, iaculis ultrices risus. Nunc sodales rhoncus nunc, et venenatis arcu feugiat vel. Maecenas id ligula vel mauris rhoncus porta eu eget elit. Nulla vehicula lorem sapien, et tristique felis pharetra a. Mauris ultrices, turpis sed euismod varius, felis purus consequat enim, ac vehicula ex nunc sit amet libero. Mauris pellentesque tortor lorem. Fusce egestas aliquam urna eget bibendum.</div>

    <div class="rounded-corner-frame">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula erat, hendrerit at ullamcorper eget, ultricies sit amet magna.</div>

</div>

CSS

.container {
    float: left;
    position: relative;
    width: 100%;
}
.rounded-corner-frame {
    border: 35px solid transparent;
    -moz-border-image: url('http://www.logitexsystems.co.uk/Temp/Rounded-Corner%20Frame.png') 35 35 fill;
    -webkit-border-image: url('http://www.logitexsystems.co.uk/Temp/Rounded-Corner%20Frame.png') 35 35 fill;
    -o-border-image: url('http://www.logitexsystems.co.uk/Temp/Rounded-Corner%20Frame.png') 35 35 fill;
    border-image: url('http://www.logitexsystems.co.uk/Temp/Rounded-Corner%20Frame.png') 35 35 fill;
    overflow: auto;
    position: relative;
    float: left;
    width: 40%;
    height: 100%;
}

Answer 1

您可以在display:table;上设置.container并在圆角div上设置display:table-cell

Demo Fiddle

否则您将遇到的问题是设置相等的高度...这些将需要相对于共享父级设置，这将需要设置一个高度（如您所述）。通过使用CSS表格结构，您可以确保两个子单元格和＃39;自动拉伸到具有最多内容的那个的高度，而不必设置分层定位/高度。

具有圆角边界图像的相等高度DIV

1 个答案:

Demo Fiddle