авто расширения высота DIV

alt text http://www.freeimagehosting.net/uploads/a33d47cb87.jpg авто расширения высота DIV

<html><head><title>Test</title> 
<style> 
.main{width:600px;border:1px solid red; } 
.main .left{background:lightblue; width:100px;clear:both; float:left;} 
.main .right{margin-left:100px;background:lightyellow; } 
</style> 
    </head><body> 
<div class="main"> 
    <div class="left"> 
    title 
    </div> 
    <div class="right"> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
    </div> 
</div> 
</body></html>

Как изменить CSS, чтобы сделать отображение страницы как диалог показывает?

PS Я думаю, что это так, чтобы увеличить ширину «левой» div, когда высота «правого» div или родительского div расширяется, но я не знаю, как это сделать.

источник

2010-04-14 Geln Yang

возможно дубликат [CSS - расширение высоты ребенка DIV до высоты родителя] (http://stackoverflow.com/ вопросы/4804581/css-expand-child-div-height-to-parents-height) – dynamic

У меня очень простое решение. Используйте атрибут CSS display: table-cell; в .left{} & .right{} стиле, как это:

.left, .right { 

     display: table-cell; 
     width:100px; 
     vertical-align:middle; 
     text-align:center; 

    }

Смотреть демо: http://jsfiddle.net/rathoreahsan/qcCPG/3/

источник

2011-07-17 21:13:05

Спасибо! Он работает, и необходимо добавить определение DOCTYPE для html-документа. –

@ Ахсан: Он не будет работать в браузерах webkit! – logan

Здесь отличается полностью стиль, который работает:

.main{width:600px;border:1px solid red; height:auto; position:relative } 
.main > div {display:inline-block; vertical-align:top; } 
.main .left{background:lightblue; width:100px; height: 100%; } 
.main .right{margin-left:5px; background:lightyellow; height: 100% }

Вы можете пройти через этот CSS tutorials в W3Schools.

источник

2010-04-14 17:39:23 Pablo

Большое спасибо, это на один шаг ближе к тому, что я хочу. Надеюсь, что это будет так, что высота правого div будет автоматически и будет расширяться при наличии большего количества контента, а высота левого div автоматически расширится, чтобы быть равным справа. –

Теперь я понимаю, что левая div'height может быть автоматически расширена только тогда, когда можно вычислить высоту главного div. –

авто расширения высота DIV

ответ

Смежные вопросы