2017-12-24 35 views
0

私はWebプロジェクトを作成しており、HTMLページを設計する必要があります。要素の高さをパーセンテージに設定して、ページに合わせやすくしたいと考えています。'float:right'または 'float:left'を使用するとcssの高さを100%に設定できません

私はCSSでfloatを使用して設定した場合:

body, html{ 
    height: 100%; 
    width: 100% 
} 

それは高さでは動作しません。 floatを使用するのではなくpositionを変更して一時的に修正しました。私はそれがうまくいかない理由にしたい。誰でも私を助けることができますか?

これは故障コードである:

html, body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
#test1, #test2{ 
 
    display:inline-block; 
 
    height: 100%; 
 
    width:30%; 
 
} 
 
#test1{ 
 
    float:left; 
 
    background: #111111; 
 
} 
 
#test2{ 
 
    float:right; 
 
    background: #009A61; 
 
} 
 

 
#test3{ 
 
    display:inline-block; 
 
    height: 100%; 
 
    width:40%; 
 
    background: cornsilk; 
 
}
<!doctype html> 
 
    <html> 
 
    <head> 
 
    <link rel="stylesheet" href="test.css" /> 
 
    </head> 
 
    <body> 
 
    <div id="test1"></div> 
 
    <div id="test3"></div> 
 
    <div id="test2"></div> 
 
    </body> 
 
</html>

は、上記のコードを除外し、結果は以下の:それは底に白い部分が表示されてはならない detail image

+0

使用高さ:100VH。これはビューの高さを取る – omukiguy

答えて

0

3つのdivはそれぞれ1ビューポートですが、#test3 divはインラインブロックなので、そこにはラインボックスが作成されます。すべてのラインボックスにはストラットがあり、ベースラインは#test3 divの下部に垂直に整列されており、ストラットのディケンダー部分がこれより下に垂れ下がっています。垂直スクロールバーは、ドキュメントをストラットの下部に表示するために作成され、追加の高さを白い隙間として表示します。

#test3 div vertical-align:topを作成して、ストラットの垂直方向の配置を#test3 divの位置から外してください。

html, body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
#test1, #test2{ 
 
    display:inline-block; 
 
    height: 100%; 
 
    width:30%; 
 
} 
 
#test1{ 
 
    float:left; 
 
    background: #111111; 
 
} 
 
#test2{ 
 
    float:right; 
 
    background: #009A61; 
 
} 
 

 
#test3{ 
 
    display:inline-block; 
 
    height: 100%; 
 
    width:40%; 
 
    background: cornsilk; 
 
    vertical-align:top; 
 
}
<div id="test1"></div> 
 
    <div id="test3"></div> 
 
    <div id="test2"></div>

+0

これは本当に美しい答えです。私はそれを理解しています。どうもありがとうございました。 –

0

空のブロックレベルの要素を追加し、clear:bothを使用します。フロートした要素を保持する親要素が終了する前に、これはあなたの仕事を行うフローティング要素をクリアするための安価なソリューションですが、これを使用しないことをお勧めします。 here

html, body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
#test1, #test2{ 
 
    display:inline-block; 
 
    height: 100%; 
 
    width:30%; 
 
} 
 
#test1{ 
 
    float:left; 
 
    background: #111111; 
 
} 
 
#test2{ 
 
    float:right; 
 
    background: #009A61; 
 
} 
 

 
#test3{ 
 
    display:inline-block; 
 
    height: 100%; 
 
    width:40%; 
 
    background: cornsilk; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
}
<!doctype html> 
 
    <html> 
 
    <head> 
 
    <link rel="stylesheet" href="test.css" /> 
 
    </head> 
 
    <body> 
 
    <div id="test1"></div> 
 
    <div id="test3"></div> 
 
    <div id="test2"></div> 
 
    <div class="clear"></div> 
 
    </body> 
 
</html>

から

は、この仕事をしましたか?問題が見つからないか、正しく理解していない可能性があります。

+0

おそらく上記の答えを読むことができます。 –

関連する問題