0

この LINKを見て、高さ 100% の 2 列のレイアウトを作成できない理由を教えてください。

ご覧のとおり、私は使用しています

html, body { 
  height: 100%;
}
.container-fluid{
  padding:0;
  height:100% !important;
  min-height: 100% !important;
}
.row-fluid{
  margin-left:0px; 
  background-color:#F5F5F5 !important;
  height:100% !important; 
  min-height: 100% !important;
}
.well.sidebar-nav{
  background-color:#383E4B !important;
  left:0;
  border:none;
  max-width:300px !important;
  margin-left: 0!important;
  height:100% !important;
  min-height: 100% !important;
}
.span9{
  background-color:#F5F5F5 !important;
  padding-top:50px; 
  margin-top:10px; 
  border:none !important; 
  height:100% !important;  
  min-height: 100% !important;
}
.navbar .avbar-inverse .navbar-fixed-top{
  border:none !important;
}

更新 そしてここにjsfiddleがあります

4

1 に答える 1

0

私が言わなければならないのは、スタイルは本当にクレイジーに見えるので、単純な 2 列のデザインを行う方法の例を Web で試してみるべきです。

とにかく、これを実現する簡単な方法は、css 疑似プロパティを使用することです:after

.span2:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}

また、追加することを忘れないでくださいheight: 100%;

.row-fluid .span2 {
    height: 100%;
    width: 14.8936%;
}
于 2013-08-21T00:48:55.433 に答える