Float right и fill parent

Когда элемент перемещается справа в относительно позиционированном элементе, как мне сделать высоту заполнять родительский элемент? Float right и fill parent

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

#page { 
    width: 980px; 
    padding: 10px; 
    background: #3C4B76; 
    display: block; 
    margin: 10px auto auto auto; 
    position: relative; 
} 

#left { 
    padding: 0; 
    margin: 0; 
    width: 230px; 
    float: left; 
} 

#right { 
    float: right; 
    width: 720px; 
    border-left: 1px solid white; 
    padding: 5px 5px 5px 20px; 
    height: 100%; 
    position: relative; 
    display: block; 
}

В этом примере #right элемент не заполняет элемент «#page», он просто растет как большой, как содержание. Если он меньше #page, я хочу, чтобы #right заполнил родительский элемент.

источник

2012-10-29 Chud37

я обновил вопрос с кодом. – Chud37

'height: 100%' необходимо применять ко всем предкам до 'html', чтобы нормально работать –

Ваша # страница не указала высоту. Это означает, что 100% высота от #right не влияет. У вас есть две возможности: вы можете указать высоту для # страницы и минимальную высоту для #right, или вы используете javascript для определения динамической высоты #page, а затем установите высоту #right –

Просто дайте ему ту же высоту, что и родительский, и примените clearfix к родительскому.

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* close commented backslash hack */

источник

2012-10-29 17:57:20 nnenna

Ну, я использую ясность: как в DIV позиционируется afterwoods, но если #left больше, чем #right, то #right не будет заполнять элемент независимо от того, что я пытаюсь. – Chud37

Скопируйте и вставьте следующий

CSS:

#page { 
    width: 980px; 
    padding: 10px; 
    background: #3C4B76; 
    display: block; 
    margin: 10px auto auto auto; 
    position: relative; 
} 

#left { 
    padding: 5px 0; 
    margin: 0; width: 230px; 
    float: left; 
} 

#right { 
    float: right; 
    width: 720px; 
    border-left: 1px solid white; 
    padding: 5px 5px 5px 20px; 
    height: 100%; 
    position: relative; 
    display: block; 
} 

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* close commented backslash hack */

HTML:

<div id="page" class="clearfix"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div>

Fiddle ссылка:

http://jsfiddle.net/uExdD/9/

источник

2012-10-29 18:05:39 AnandVeeramani

Попробуйте это для родителей:

overflow:auto;

Другое решение:

Родитель:

display: table;

ребенок:

display: table-row;

Проверьте fiddle

UPDATE: Чтобы установить равные колонки по высоте с Cross-Browser CSS вы должны прочитать это Matthew James post

источник

2012-10-29 18:07:02

хорошо, но как насчет того, когда левое длиннее правого: http://jsfiddle.net/j7wd4/1/ – Chud37

@ Chud37 Я вижу вашу мысль, проверяю обновление –

Float right и fill parent

ответ

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