web-dev-qa-db-ja.com

Twitterの列に100％の高さを設定するBootstrap

私はBootStrapに慣れていないので、ロープを学び、理解します。ページの100％の高さをカバーするように、列グリッドで100％の高さを達成しようとしています。現在、高さは設定されていません。 .col-lg-9列とcol-lg-3列の両方の高さをピクセル単位で指定しようとすると、％変化は発生しません。何が問題なのかわかりません。これが私が使用している基本構造です。

<body>
<div class="row">
"Top bar"
</div>
 <div class="container">
       <div class="row">
        <div class="col-lg-3">
side bar
</div>

 <div class="col-lg-9">
side bar
</div>

</div>

そしてここに各アイテムのCSSがあります

@media (min-width: 1200px)
.container {
max-width: 1170px;
}
.row {
margin-bottom: 20px;
}
.col-lg-9 {
width: 75%;
padding: 10px 20px;
border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-o-border-radius: 0 10px 10px 0;
border: 0 none;
padding-top: 3%;
min-height: 90%;
}
.col-lg-3 {
width: 25%;
background-color: #192D38;
color: #88A7A9;
min-height: 90%;
}
htmlcsstwitter-bootstraptwitter-bootstrap-3
8
Ahmar Ali

これを試して：

html,body
{
  height: 100%;
}

それでも問題が解決しない場合は、要素の検査を使用して、親要素の高さが100％であることを確認します。 （そうでない場合、子要素はposition:absoluteまたはposition:fixedでない限り、100％の高さを取得しません。

18
Danield