У меня есть две коробки height: 100%; внутри другого div. Но когда я делаю внутреннюю коробку height: 100%;, зеленый <h2> перемещается по красному ящику. Как я могу решить эту проблему?Переполнение с высотой CSS: 100%?
код: http://jsfiddle.net/ajnglagla/9yL7c946/
скриншот: http://imgur.com/YMI1vXS
У меня есть лучшее решение. попробуйте этот
.a-detay section {
margin: 0 0 30px 0;
}
.a-detay section h2 {
font-size: 190%;
font-weight: normal;
line-height: 1.15em;
margin: 10px 0;
}
.a-detay section .k-konteyner {
position: relative;
}
.a-detay section .k-konteyner .alanozet {
padding: 10px;
width: 134px;
height: 100%;
position: absolute;
right: 0px;
box-sizing: border-box;
top: 0;
}
.a-detay section .k-konteyner .detay {
padding: 30px;
width: 100px;
}
.a-detay #guvenlik .k-konteyner {
border: 5px solid #f7464a;
}
.a-detay #guvenlik .k-konteyner .alanozet {
background-color: #f7464a;
}
.a-detay #guvenlik h2 {
color: #f7464a;
}
.a-detay #saglik .k-konteyner {
border: 5px solid #4eb055;
}
.a-detay #saglik .k-konteyner .alanozet {
background-color: #4eb055;
}
.a-detay #saglik h2 {
color: #4eb055;
}<section class="a-detay">
<section id="guvenlik" class="konu">
<h2>Red</h2>
<div class="k-konteyner">
<div class="detay">
Left
<br>Left
<br>Left
<br>Left
<br>Left
<br>Left
</div>
<div class="alanozet">When i make this area height 100%, Green H2 is being over the RED box.</div>
</div>
</section>
<section id="saglik" class="konu">
<h2>Green</h2>
<div class="k-konteyner">
<div class="detay">
Left
<br>Left
<br>Left
<br>Left
<br>Left
<br>Left
</div>
<div class="alanozet">When i make this area height 100%, Green H2 is being over the RED box.</div>
</div>
</section>
</section>Wowww благодарю вас так много :) Его работы отлично :) Спасибо. – Gulhan
Просто удалите float: left; в a-detay section {}
Обновлено DEMO(Ваш JSFiddle)
Почему вы хотите использовать поплавок, когда у вас есть 100% ширина?
Можете ли вы проверить это, пожалуйста? http://imgur.com/ZmGw20N Он выглядит правдоподобно, но когда я над секцией Green на Firebug, он показывает, что выделенная область по-прежнему находится над красным полем. Если я по красной секции, это будет выглядеть так: http://imgur.com/0RGDdhr – Gulhan
Я посмотрю. Подожди. –
Мне жаль, не могу понять это, но я вижу, что вы используете много ненужных 'floats' –
попробовать это
html,
body {
height: 100%;
}
.a-detay {
float: left;
width: 100%;
height: 100%;
}
.a-detay section {
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0 0 30px 0;
}
.a-detay section h2 {
font-size: 190%;
font-weight: normal;
line-height: 1.15em;
margin: 10px 0;
}
.a-detay section .k-konteyner {
float: left;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.a-detay section .k-konteyner .alanozet {
float: right;
padding: 0 0 20px 0;
width: 134px;
height: 100%;
box-sizing: border-box;
}
.a-detay section .k-konteyner .detay {
float: left;
padding: 30px;
width: 200px;
}
.a-detay #guvenlik .k-konteyner {
border: 5px solid #f7464a;
}
.a-detay #guvenlik .k-konteyner .alanozet {
background-color: #f7464a;
}
.a-detay #guvenlik h2 {
color: #f7464a;
}
.a-detay #saglik .k-konteyner {
border: 5px solid #4eb055;
}
.a-detay #saglik .k-konteyner .alanozet {
background-color: #4eb055;
}
.a-detay #saglik h2 {
color: #4eb055;
}<section class="a-detay">
<section id="guvenlik" class="konu">
<h2>Red</h2>
<div class="k-konteyner">
<div class="detay">
Left
<br>Left
<br>Left
<br>Left
<br>Left
<br>Left
</div>
<div class="alanozet">
When i make this area height 100%, Green H2 is being over the RED box.
</div>
</div>
</section>
<section id="saglik" class="konu">
<h2>Green</h2>
<div class="k-konteyner">
<div class="detay">
Left
<br>Left
<br>Left
<br>Left
<br>Left
<br>Left
</div>
<div class="alanozet">
When i make this area height 100%, Green H2 is being over the RED box.
</div>
</div>
</section>
</section>.a-detay #saglik h2 {margin-top:30px;color:#4eb055;}
изменить правила CSS, как это. это будет работать я думаю .. но я не знаю, что метод является правильным или нет
или это
.a-detay section { float:left; width:100%; height:100%; box-sizing: border-box; margin:30px 0px 30px 0;}
, он выглядит нормально, но когда я нахожусь над мной, я все еще вижу, что область с подсветкой не над div. – Gulhan
Ну, это точно, как 'переполнения: hidden' является _supposed_ работать - вы получаете элемент, который 100% высокий, а если содержание превышает эту высоту он просто _overflows_ элемент, без больше не влияя на ее эффективную высоту. Если вы этого не хотите - тогда не используйте 'overflow: hidden' ... возможно, вы просто хотите указать минимальную высоту ...? – CBroe
Я пробовал переполнение: скрытый, но это не решает мою проблему. У меня 6 разных боксов. Я написал небольшой jquery, чтобы дать им разные высоты, но я надеюсь решить эту проблему с помощью чистого css @CBroe – Gulhan