1. 首页
  2. 问答
  3. 我在引导程序中面临100％高度问题html

我在引导程序中面临100％高度问题html

2015-09-11 79 views
0

我无法设置100％高度左侧栏。我尝试了所有可能的方法，在这里我使用引导列。请帮助我。谢谢我在引导程序中面临100％高度问题html

<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; 
}

页脚CSS：

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

来源

2015-09-11 Arun Kumar M

+0

哪里是你的CSS？ –

+0

使用'！important'，这样它就会覆盖引导css –

+0

我用过了！重要的还有，还没有工作 –

回答

0

你可以尝试这样，你需要在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>

添加transform值我希望它会帮助你。

来源

2015-09-11 05:21:18

1

您应该使用position:relative为body和html标签

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

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

来源

2015-09-11 05:23:22

+0

你的代码正在工作。但是当向下滚动时，页脚显示在中间。它总是处于最底层。你可以看看css页脚 –

+0

; https://jsfiddle.net/16r781ys/2/我使用display：table来显示.row，并显示：table-cell的右侧和左侧div。也删除浮法：从他们离开 –

+0

现在我面临的问题与宽度 –

0

这已被解决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; 
}

来源

2015-09-11 05:33:06

0

继承人一个非常简单的方法来建立一个侧边栏。

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; 
 
}
<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>

来源

2015-09-11 06:04:19 vanburen

相关问题

 相关问题