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