欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

浮动 下面的 子元素 高度相等 高度 一致 高度一样 How to float an element left with full height of the wrapper? 有大用

星期一, 2016-09-05 15:51 — adminshiping1
<div class="wrapper"> 
    <div class="left">
        Foo
    </div>
    <div class="right">
        Text row 1
    </div>
</div>

<div class="wrapper">
    <div class="left">
        Foo Bar
    </div>
    <div class="right">
        Text row 1<br>
        Text row 2<br>
        Text row 3
    </div>
</div>



.wrapper { overflow:hidden; } .left { width:80px; float:left; height:100%; }



正确答案
The display: table solution

Within tables each cell of a row has the same height.

.wrapper {
    display: table;
    width: 100%;
}
.left, .right {
    display: table-cell;

float: none;
}

This is the best solution in my opinion, but is not compatible before IE8.

Here is the Fiddle for this solution.

Using absolute positioning

Absolute positioned elements respect their relative parents height:

.wrapper {
    position: relative;
    padding-left: 85px;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
}

Normally I would not recommend absolute positioning in most situations. But as you have a fixed width anyway, maybe it does not matter. But be aware of the fact that this will ignore long contents in.left. The height is just controlled by .right.

Here is an update to your Fiddle.

The flexible solution

This is so new I would not recommend using it right now, but just to be complete. You could use CSS3flex:

.wrapper {
    display: flex;
}

The Fiddle (tested in current Chrome and Firefox).

来自 http://stackoverflow.com/questions/15817019/how-to-float-an-element-left-with-full-height-of-the-wrapper


 

190down votefavorite
45

Here is the HTML:

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

And here is the CSS:

#inner {
  float: left;
  height: 100%;
}




 

115down voteaccepted

For #outer height to be based on its content, and have #inner base its height on that, make both elements absolutely positioned.

More details can be found in the spec for the css height property, but essentially, #inner must ignore #outer height if #outer's height is auto, unless #outer is positioned absolutely. Then #inner height will be 0, unless #inner itself is positioned absolutely.

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

However... By positioning #inner absolutely, a float setting will be ignored, so you will need to choose a width for #inner explicitly, and add padding in #outer to fake the text wrapping I suspect you want. For example, below, the padding of #outer is the width of #inner +3. Conveniently (as the whole point was to get #inner height to 100%) there's no need to wrap text beneath #inner, so this will look just like #inner is floated.

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

I deleted my previous answer, as it was based on too many wrong assumptions about your goal.

来自  http://stackoverflow.com/questions/15817019/how-to-float-an-element-left-with-full-height-of-the-wra...

 
 






up vote1down votefavorite
 

I suspect there is no answer to this but I as wondering if there was a way to set the height of a floating div to 100%?

I have two divs, within a wrapper div:

<div id="wrapper">
    <div id="left">
    </div>
    <div id="right">
    </div>
</div>

The right div has a set height and I want the left div to match it, so I created:

#wrapper {
    background-color: red;
    width: 200px;
    height: 100%;
    overflow: auto;
    padding: 5px;
}

#left{
    width: 90px;
    height: 100%;
    float:left;
    background-color: #ccc;
}

#right{
    width: 90px;
    height: 300px;
    float:right;
    background-color: blue;
}

but the left div doesnt expand. Fiddle here: http://jsfiddle.net/8dstK/2/

Would anyone know a way to achieve divs of equal height?

Should I just use JQuery to grab the height of right div and apply it to left div?

  
shareimprove this question
 
   
why don't you just use the same height for left as right? – Krishna Jul 19 '13 at 5:44
   
@upcoming_coder on my real site one column is dynamically filled with content from my CMS - unknown height – MeltingDog Jul 19 '13 at 5:58
up vote1down voteaccepted

You could do it by setting up a table-like scructure of <div>s in your HTML and then using display: table, display: table-cell, etc. This will work because table cells in the same row automatically resize to the same height as the tallest cell. However, IE7 and below do not support display: table.

jsFiddle

<div id="wrapper">
    <div id="inner-wrapper">
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>
    </div>
</div>
#wrapper       { display: table; }
#inner-wrapper { display: table-row; }
#left          { display: table-cell; }
#right         { display: table-cell; }

I had to remove float: left and float: right from #left and #right to get the table-cell display to work, since table cells can’t float. However, this has stuck the two divs together. And table cells do not accept margins, only padding. You may need an extra display: table-cell div between left andright to separate them, if you don’t want padding separating them.

Read more about display: table and family on QuirksMode and on MDN.

来自 http://stackoverflow.com/questions/17738826/set-floating-div-to-height-100


普通分类: 
div+css
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2