1. 首頁
  2. 問答
  3. 我在引導程序中面臨100％高度問題html

我在引導程序中面臨100％高度問題html

2015-09-11 69 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

相關問題

 相關問題