私はReactアプリケーションでFlexboxを使用して、全幅と高さを占める単純な2列のウェブページを作成しようとしています。CSS 100%の高さがリアクションアプリケーションでは機能しません
私はこれをHTMLとCSSで動作させることができますが、Reactアプリケーションでは動作しません。
これまでのところ、私が持っている:
:root {
overflow-x: hidden;
height: 100%;
}
body {
min-height: 100%
}
.flexbox {
height: 100%;
display: flex;
}
.left {
flex: 0 0 200px;
height: 100%
}
.right {
flex: 1
}
と:
<div class="flexbox">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
を私はindex.html
に追加<div id="root"></div>
タグを説明するために必要なことを実現ので、私は私のCSSに以下をも追加されました:
#root {
height: 100%;
}
そして、私のrender
機能:
render() {
return (
<div className="flexbox">
<div className="left">Left</div>
<div className="right">Right</div>
</div>
)
}
これは機能しません。列は存在しますが、完全な高さではありません。何故なの?
私は愚かに聞こえるなら、私を許していますが、cssファイルの権利をインポートしていますか? – Dane
はい私は 'レフト'と '右'は実際に背景色を持っていて、彼らは見せています。 – tommyd456
このリンクを参照することができます: - https:// stackoverflow。com/questions/6654958/make-body--html-100-of-the-browser-height –