Question

我无法设置100％高度的左侧栏。我已经尝试了所有可能的方法，在这里我使用bootstrap列。请帮帮我。谢谢

<body>
<div class="container-fluid main-template">  
<div class="row">    
<div class="col-sm-3 col-md-2 left_side">left_side</div>
<div class="col-sm-9 col-md-10 right_side">right_side</div>
</div>
</div>
<footer class="main-footer">
</body>

我为html，body，main-template，row，left_side和right_side设置了100％的高度。仍然没有用。

html, body {
    background-color:#ffffff;
    min-height: 100%;
}

.main-template {
    padding:0px;
    height:100%;
}
.row {
        height:100%;
}
.left_side, .right_side {
    min-height:100%;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

footer css：

.main-footer {
    position:absolute;
    bottom:0;
    padding: 10px 20px 5px;
    width:100%;
    background-color:#33b3e3;
    height:50px;
}

Answer 1

您应该position:relative使用body和html代码

html, body {
    background-color:#ffffff;
    height: 100%;
    position:relative;
}

例如： https://jsfiddle.net/16r781ys/

Answer 2

您可以尝试这样做，您需要在transform

中添加media css值

html, body {
    background-color:#ffffff;
    min-height: 100%;
}

.main-template {
    padding:0px;
    height:100%;
}
.row {
        height:100%;
}
.left_side{
  position: absolute;
  min-height:100%;
  background-color: #ccc;
}
 .right_side{
  background-color: #e5e5e5;
    -ms-transform: translate(19.6%); /* IE 9 */
    -webkit-transform: translate(19.6%); /* Safari */
     transform: translate(19.6%);
 }

.left_side, .right_side {
    
    padding-right: 0px !important;
    padding-left: 0px !important;
}

@media (max-width: 991px) and (min-width:768px) {
 .right_side{
    -ms-transform: translate(33.6%); /* IE 9 */
    -webkit-transform: translate(33.6%); /* Safari */
     transform: translate(33.6%);
 }
}
 @media (max-width: 768px) and (min-width:320px) {
  .right_side{
    -ms-transform: translate(9.6%); /* IE 9 */
    -webkit-transform: translate(9.6%); /* Safari */
     transform: translate(9.6%);
 }
  }

<div class="container-fluid main-template">  
  <div class="row">    
    <div class="col-sm-3 col-md-2 left_side">left_side</div>
    <div class="col-sm-9 col-md-10 right_side">right_side</div>
  </div>
</div>

我希望它会对你有所帮助。

Answer 3

这已经解决了Here检查出来..

HTML

<div class="container">
        <div class="span5 fill">
        Hello World
        </div>
    </div>

CSS

  @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

html,body{height:100%;}

.container {
    height:100%;
}

.fill{
    width:100%;
    height:100%;
    min-height:100%;
    background-color:#990000;
    padding:10px;
    color:#efefef;
}

Answer 4

这是构建侧边栏的一种非常简单的方法。

＆＃13;

body,
html {
  height: 100%;
}
.sidebar-fixed {
  padding: 5px 18px;
  position: fixed;
  width: 200px;
  height: 100%;
  top: 0;
  left: 0;
  background: #f5f5f5;
}
.main-content {
  padding-top: 5px;
  margin-left: 200px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="sidebar-fixed">
  <div class="alert alert-info">Sidebar</div>
</div>
<div class="main-content">
  <div class="container-fluid">
    <div class="alert alert-info">Content</div>
    <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock,
      bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus
      Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum
      dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.</p>
    <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock,
      bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus
      Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum
      dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.</p>
    <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock,
      bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus
      Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum
      dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.</p>
    <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock,
      bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus
      Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum
      dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.</p>
    <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock,
      bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus
      Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum
      dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.</p>
  </div>
</div>

＆＃13;

我在bootstrap html中遇到100％高度问题

4 个答案: