发表新帖
发表新帖

HTML/CSS set div to height of sibling

后端 未结
关注
10 2094
南旧
南旧 2020-12-03 00:43

I have 2 div\'s contained in a third. One of the contained div\'s is floated left, the other floated right. I would like the 2 sibling div\'s to always be at the same heig

相关标签:
10条回答
  • 日久生厌
    2020-12-03 01:17

    I can rack my brain all I want, but I think this can really be solved only using table behaviour, i.e. using <table>s (if you need to be IE6 and IE7 compatible) or display: table / table-row / table-cell (which is effectively the same thing but won't embarrass you in front of your peers because tables are evil. ;).

    I'd go for a table.

    Feel free to prove me wrong and post a sane CSS solution, I'd be delighted!

    0 讨论(0)
  • 挽巷
    2020-12-03 01:17

    I ran into this issue several times this week and this topic was the closest I came to finding a concrete answer. This is an expansion on @Pekka's response for those who need a bit more to go on, I certainly did.

    jsFiddle

    example html:

    <div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">
            Lorem ipsum dolor sit amet, at assum gubergren his, 
            ex iudicabit dissentiunt intellegebat has. Ne odio detraxit
            instructior vim. Fugit velit consetetur an eos. 
            Ea suas veri mnesarchum mel.
        </div>                
    </div>
</div>

    example css:

    .view-table
{
    display:table;
    width:100%;
}
.view-row
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;

}
.view-name 
{
    text-align:right;
    background-color: lightblue;
}
.view-type
{
    background-color: pink;
}
    0 讨论(0)
  • 你的背包
    2020-12-03 01:17

    This will allow the right div's height to always be that of the left as left grows dynamically based on content, but the right will never grow larger than min-height if the left has less content, that may be acceptable for you:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Matching Size Divs</title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
 <style>
    #main-container { position:relative; min-height:500px; }    
    #left-div { width:700px; min-height:500px; }      
    #right-div { position:absolute; margin-left:700px; width:248px; top:0px; bottom:0px; }    
 </style>
</head>
<body>
    <div id="main-container" class="border clearfix"> 
    <div id="left-div" class="border"> 
        ...
    </div> 
    <div id="right-div" class="border"> 
        ... 
    </div> 
</div>
</body>
</html>
    0 讨论(0)
  • 情深已故
    2020-12-03 01:19

    I think this can be implemented by specifying both the div s (i.e. left-div & right-div) height to be 100%. This way they'll take up the height of container div & if no height is specified for the container div by html/css, then the container div also expands to accommodate its child elements. I know its quite late, but it might just save you the script.

    0 讨论(0)
 看不清?
提交回复
热议问题