0
我有两个height: 100%;框在另一个div内。但是当我制作内部框height: 100%;时，绿色<h2>正在红色框中移动。我怎么解决这个问题？溢出CSS高度：100％？
代码：http://jsfiddle.net/ajnglagla/9yL7c946/
A
回答
1
我有最好的解决方案。试试这个
.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>+0
Wowww非常感谢你:)它的作品很棒:)谢谢。 – Gulhan 2014-09-25 09:22:36
1
+0
你可以检查这个吗？ http://imgur.com/ZmGw20N它看起来不错，但当我在萤火虫的绿色部分，它显示突出显示的区域仍然在红色框。如果我在红色部分显示，就像那样http://imgur.com/0RGDdhr – Gulhan 2014-09-24 11:19:34
+0
我会查找它。不挂断。 – 2014-09-24 11:20:38
+0
对不起，不知道，但我看到你使用了很多不必要的'浮动' – 2014-09-24 11:32:17
0
试试这个
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>
0
.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;}
+0
它看起来不错，但是当我将鼠标移过去时，我仍然看到hightlighted区域没有超过div – Gulhan 2014-09-25 07:10:30
相关问题
- 1. 高度溢出问题：100％;
- 2. Chrome flexbox其他100％高度flexbox溢出100％高度
- 3. css高度和溢出
- 4. CSS 100％高度
- 5. 100％的高度正在DIV溢出
- 6. 100％高度div和溢出：自动
- 7. 100％高度溢出div容器
- 8. 溢出（滚动） - 100％的容器高度
- 9. CSS - 绝对内固定与溢出滚动和100％的高度
- 10. 100％高度和100％宽度的文本溢出
- 11. 子div在CSS Flexbox（FF/Chrome不一致）中溢出高度超过100％高度
- 12. Bootstrap css - div高度和溢出
- 13. CSS高度页面高度的100％？
- 14. CSS 100％高度+标题静态高度;
- 15. 不溢出并具有100％高度/宽度的网页
- 16. CSS连续100％的高度
- 17. 高度到100％在CSS
- 18. CSS 100％高度问题
- 19. CSS嵌套div高度100％
- 20. CSS高度：100％问题
- 21. 问题与CSS高度100％
- 22. 在IE7中CSS高度100％
- 23. CSS高度100％的问题
- 24. CSS 100％高度滚动
- 25. CSS 100％高度的DIV
- 26. css右边栏高度100％
- 27. CSS 100％高度不工作，但身体是100％高度？
- 28. CSS高度100％+溢出：自动不显示所有的嵌套内容
- 29. 的Jquery/CSS：100％高度格调整大小，即使溢出是自动
- 30. 保持宽高比为100％（CSS中的裁剪溢出）
嗯，这是溢究竟是如何'：hidden'是_supposed_工作 - 你得到的是100％的高的元素，如果其含量超过高度，它只是_overflows_元素，不再次影响其有效高度。如果你不想这样做 - 那就不要使用'overflow：hidden' ......也许你只是想指定一个最小高度而不是......？ – CBroe 2014-09-24 11:01:39
我尝试过溢出：隐藏，但这并不能解决我的问题。我有6个不同的高度div盒。我写了一个小jQuery给他们不同的高度，但我希望用纯css解决这个问题@CBroe – Gulhan 2014-09-25 08:32:46