0

こんにちは私はhtmlの高さに問題があります。

私の身長はピクセルに設定され、すべてが大丈夫です。しかし、パーセンテージで表示すると、表示されません。

幅と同じように、画面に合わせて高さも必要です。

これがコードです

私が欲しいのは、画面に合うようにdivの高さをパーセンテージにleft変更することです。right私がそれをするとき、私のdivは消えます。

4

4 に答える 4

2

もちろん消えます。Divまたはdisplay: blockデフォルトで自動高さ（コンテンツによって定義される）を持つ要素は100％であるため、50％の高さが必要な場合、自動の50％は0であるため、何の意味もありません。

于 2012-06-23T16:04:53.513 に答える
1

少し遅れましたが、ウィンドウのサイズに合わせて拡大縮小するので、これがあなたが探していたものだと思っていたでしょう。これが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-23T16:37:25.397 に答える
1

内側の div の高さをパーセントで設定する場合は、最初に親の高さを設定する必要があります。次に、内側の div が親コンテナーの割り当てられた高さのパーセントを占めます。

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

#left{ height:100% }親divの高さに応じて高さを測定し#containerます。

デモ。 </p>

于 2012-06-23T16:08:10.813 に答える
1

このフィドルをチェックしてください。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-23T16:10:35.500 に答える