身體及其子元素的身高100％

我指定body的背景顏色，僅顯示一定的距離。我需要它是全高的，也是它的子元素。它的一個子元素有border-right，它也需要在整個屏幕高度上顯示。身體及其子元素的身高100％

我的CSS看起來像（樣本之一）更好地檢查我的演示

html,body { 
     height: 100%; 
     background-color: #fefefe; 
    } 
    .cover { 
     height: 100%; 
    } 
    .left_side { 
     float: left; 
     height: 100%; 
     border-left: 1px solid #ccc; 
     width: 31%; 
    }

和HTML是

 <body> 
     <div class="cover"> 
      <div class="left_side"> 
      </div> 
     </div> 
     </body>

和BGCOLOR和孩子的邊界似乎上一些有限距離只有像 enter image description here 這是什麼問題的傢伙我需要的背景和borde r爲100％的高度。

來源

2013-07-31 Vivek Vikranth

你的html丟失html-tags wooha：D添加它們並嘗試設置html，body {height：100％; margin：0; padding：0;} ...同時，頁面上顯示的比你提供的要多得多通過代碼，所以有一些ovverriding你的風格 –

@johnSmith我從來沒有錯過把HTML標籤到我的HTML ..上面給出的代碼是示例一 –

不要給身高或HTML的'高度：100％'。 –

刪除高度：100％，從你的身體和HTML風格。

而不是將邊框設置爲左側容器，而是嘗試設置內容容器上的邊框。

你的CSS是這樣的：

.large-9 .columns .right_side{border-left:1px solid #333;}

左列當前設置爲100％，正確呈現。問題是它沒有考慮到你看不到的溢出內容，直到你滾動。另一個解決辦法是絕對的或固定的位置，左容器，並設置其頂部和底部的數值爲0

CSS的，將是這樣的：

.left_side .full_height{position:fixed;top:0;bottom:0;width:200px;}

這裏是一個非常基本的佈局，固定左欄 - http://jsfiddle.net/WAJtk/

，並具有固定頭一個版本太多 - http://jsfiddle.net/WAJtk/1/

你可能還喜歡這支筆 - http://codepen.io/lukeocom/pen/KqAfG

來源

2013-07-31 07:51:11 lukeocom

你可以使用絕對位置和設置頂部和底部：

body { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
}

來源

2013-07-31 07:40:27 Tdelang

身體及其子元素的身高100％

回答

相關問題