Подтвердить что ты не робот

Мин-высота: 100%; высота: 100%; не работает

Я не могу понять, что не так с моими стилями.
Надеюсь, кто-то может мне помочь. Пример кода:

<style type="text/css">
.maindiv {
    overflow:hidden; border:#000 1px solid;
    width:450px; min-height:250px;
}
.left_inner {
    float:left; width:200px;
    min-height:100%; background:#00CC33;
}
.right_inner {
    float:left; width:150px; background:#C93;
}
</style>
<div class="maindiv">
    <div class="left_inner">Left Block content</div>
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>

Как это должно быть, как в браузере Opera (см. изображение):

Ответ 1

Как

http://jsfiddle.net/L9GEa/

Почему

Можно интуитивно предположить (как я когда-то сделал), что элемент html уже имеет определенную высоту, но это не так (по крайней мере в этом контексте). К счастью (или по дизайну) этот один элемент обладает уникальным свойством его высоты, определяемой, когда ему присваивается процентная высота. Это основная концепция, потому что для того, чтобы вычислить (определить) высоту любого другого элемента, которому назначена процентная высота, вы также должны определить высоту родительского элемента.
Любой, кто работал с CSS и DOM, скорее всего, скажет вам, что они ненавидят float. Это связано с тем, что он вытягивает элемент из потока, что требует дополнительной работы и мышления для манипулирования эффектами. Вместо этого используйте display: inline-block; vertical-align: top; с одной оговоркой, что вам придется добавить html-комментарии вокруг любого пробела между этими элементами.

CSS

.maindiv {
    overflow:hidden; border:#000 1px solid;
    width:450px;min-height:250px;
    /*changes*/
    height:100%;
}
.left_inner {
    float:left; width:200px;
    min-height:100%; background:#00CC33;
    /*changes*/
    float:none;
    display:inline-block;
    vertical-align:top;
}
.right_inner {
    float:left; width:150px; background:#C93;
    /*changes*/
    float:none;
    display:inline-block;
    vertical-align:top;
}
/*changes*/
html,
body{
    height:100%;
}

HTML

<div class="maindiv">
    <div class="left_inner">Left Block content</div><!--
    --><div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>

Ответ 2

добавить

html,
body {
  height:100%
}

в верхней части вашего css, который работает для меня

EDIT: мой тест:

<!DOCTYPE html>
<html>

<head>
<style>
html,
body {
height:100%;
}

.maindiv {
   overflow:hidden; border:#000 1px solid;
    width:450px; height:100%;
position:relative;
}
.left_inner {
    float:left; width:200px;
    min-height:100%; background:#00CC33;
position:relative;
}
.right_inner {
    float:left; width:150px; background:#C93;
}
</style>
</head>
<body>
<div class="maindiv">
<div class="left_inner">Left Block content</div>
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>
</body>
</html>

Ответ 3

Попробуйте следующее:

    <style type="text/css">
.maindiv {
    overflow:hidden; border:#000 1px solid;
    width:450px; height: auto; min-height:250px;
}
.left_inner {
    float:left; width:200px;
    min-height:100%; height: 100%; background:#00CC33;
}
.right_inner {
    float:left; width:150px; background:#C93;
}
</style>
<div class="maindiv">
    <div class="left_inner">Left Block content</div>
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>

В большинстве случаев вам необходимо применить высоту авто или 100% к родительскому DIV.