動態DIV高度

在頁面的HEAD我動態DIV高度

<style type="text/css"> 
    html { 
     overflow: hidden 
    } 
    html, body, #centralDIvision { 
     margin-left: auto; 
     margin-right: auto; 
     width: 1100px; 
     height: 400px; 
    } 
    #centralDivision { 
     float: left; 
    } 
    #outer { 
     display: table; 
     position: absolute; 
     height: 100%; 
     width: 100% 
    } 
</style>

但不是具有centralDivision DIV等於400像素，我想的高度，它是瀏覽器的當前屏幕尺寸的75％。有沒有辦法讓我做到這一點？

來源

2012-04-24 user1323153

請顯示HTML。 DOM結構在這裏是必不可少的。 – 2012-04-24 23:15:09

你試過了什麼？另外它不僅僅是'＃centralDivision'規則中的「高度：75％」？ – 2012-04-24 23:16:15

你試過更換此

height: 400px;

這個？

height: 75%;

來源

2012-04-24 23:14:13 JohnFx

#centralDIvision { height: 75%; }將讓你非常接近，如果#centralDIvision元素是人體的直接後裔。（當％規定的高度，它是基於父母的身高。）

來源

2012-04-24 23:16:00 KatieK

+1 - 一種解決方法，如果它不是直系後代，將使用最終所有者容器上的75％，然後100％用於所有兒童;或同等100％的所有者容器，75％僅用於#centralDivision;取決於需要什麼。 – 2012-04-24 23:18:51

只是對多樣性，另一種方法，使用絕對定位：

#parent { 
    position: relative; 
    height: 400px; 
} 
#child { 
    position: absolute; 
    top: 12.5%; 
    bottom: 12.5%; 
    left: 0; 
    right: 0; 
}

和working example on jsFiddle當然。

來源

2012-04-24 23:45:18

夥計那些CSS箭頭頭是親 – 2012-04-25 04:24:30

你是否學會這樣做？有沒有在線教程？ – 2012-04-25 04:25:02

感謝，有不少有趣的參考資料，其中[CSS-Tricks]（http://css-tricks.com/），[CSS禪園]（http://www.csszengarden.com/）和當然，[W3C上的CSS主頁]（http://www.w3.org/Style/CSS/）。如果你喜歡這些箭頭，也有類似的技術來創建[純CSS語音泡泡]（http://jsfiddle.net/eliranmal/55yqG/）。喲，CSS是相當sh ** :) – 2012-04-25 11:13:57

回答

相關問題