'float：right'または 'float：left'を使用するとcssの高さを100％に設定できません

私は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

。

出典

2017-12-24 Beibei Kang

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

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>

出典

2017-12-24 18:50:21 Alohci

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

空のブロックレベルの要素を追加し、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>
から

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

出典

2017-12-24 18:20:47 lllllllllllllIllllIll

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

'float：right'または 'float：left'を使用するとcssの高さを100％に設定できません

答えて

関連する問題