html div的高度（％）

我的高度現在設置爲像素，一切都沒問題。但是，當我把它在百分比它不顯示：

我需要高度來適應我的屏幕也是寬度。

這裏是CODE

我想是改變left和right div的高度，以百分比來適應屏幕。當我這樣做我的div消失。

2012-06-23 user123_456

看看這個fiddle。我改變了CSS這種方式：

html, body 
{ 
height: 100%; 
margin: 0; 
padding: 0 ; 
border: 0 none; 
} 

#footer 
{ 
clear:both; 
text-align:center; 
background-color:#4671D5; 
-moz-border-radius-bottomleft: 100px 50px; 
    border-bottom-left-radius: 100px 50px; 
    -moz-border-radius-bottomright: 100px 50px; 
    border-bottom-right-radius: 100px 50px; 
} 
#left 
{ 
background-color:red; 
height:100%; 
width:80%; 
float:left; 
} 
#right 
{ 
background-color:blue; 
float:left; 
width:20%; 
margin:0; 
    height:100%; 
} 
#header 
{ 
background-color:#4671D5; 
-moz-border-radius-topleft: 100px 50px; 
    border-top-left-radius: 100px 50px; 
    -moz-border-radius-topright: 100px 50px; 
    border-top-right-radius: 100px 50px; 
    height: 100%; 
} 
#container 
{ 
width:98%; 
padding-left:1%; 
padding-right:1%; 
    height: 100%; 
}

它的工作。 :)

來源

2012-06-23 16:10:35

是的，這是工作 –

高興的是，它的工作原理。謝謝。 :) –

當然它們消失了。 Div或任何默認具有display: block的元素具有100％的寬度和自動高度（由其內容定義），因此當您說50％的高度並不意味着什麼因爲50％的自動爲0.

來源

2012-06-23 16:04:53 slash197

如果要設置內部div的百分比高，那麼你必須設置它的父高度的第一，然後你內心的div將佔據其高度的百分之指定的父容器。

#container { 
    width:98%; 
    height:570px; 
    padding-left:1%; 
    padding-right:1%; 
}

#left{ height:100% }將測量是根據其高度的父DIV #container高度。

DEMO.

來源

2012-06-23 16:08:10

我有點晚了，但我還以爲這就是你要找的人，因爲它生長，並與窗口的尺寸縮小。這是它的jsfiddle。

這裏的HTML：

<html> 
    <body onload="initialize()"> 
     <div id="container"> 
      <div id="header">Header</div> 
      <div id="left">Left</div> 
      <div id="right">Right</div> 
      <div id="footer"> Footer</div> 
     </div> 
    </body> 
</html>

這裏的CSS：

html, body 
{ 
    height:100%; 
} 
#container 
{ 
    height: 100%; 
    width:98%; 
    padding-left:1%; 
    padding-right:1%; 
} 
#header 
{ 
    height:10%; 
    background-color:blue; 
} 
#footer 
{ 
    height: 10%; 
    clear:both; 
    background-color:yellow; 
} 
#left 
{ 
    background-color:red; 
    height:80%; 
    width:70%; 
    float:left; 
} 
#right 
{ 
    background-color:green; 
    height:80%; 
    width:30%; 
    float:left; 
}

來源

2012-06-23 16:37:25 GusP

html div的高度（％）

回答

相關問題