高度到100％在CSS

我有一個3欄的網站。左側和右側，如果我把高度：100％，它只填充到該列中的內容的結尾。我希望它一直下到頁腳。因此不會在列和頁腳之間留下空隙。高度到100％在CSS

CSS

/* RIGHT COLUMN */ 
#rightcolumn{ 
float: left; 
width: 20%; /*Width of right column in pixels*/ 
min-width: 200px; 
height: 100%; 
margin-left: -20%; /*Set margin to that of -(RightColumnWidth)*/ 
background: #5f5f5f; 
color: White; 
} 

/* LEFT COLUMN */ 
#leftcolumn{ 
float: left; 
width: 20%; /*Width of left column in percentage*/ 
min-width: 200px; 
height: 100%; 
margin-left: -100%; 
background: #5f5f5f; 
color: White; 
}

也情況下，它需要

body{ 
margin:0; 
padding:0; 
line-height: 1.5em; 
color: black; 
height: 100%; 
} 

/*TOPSECTION */ 
#topsection{ 
background: url('../images/bannerBGbkup.jpg'), url('../images/bannerBGl.jpg'); 
background-position: left top, left top; 
background-repeat: no-repeat, repeat; 
height: 200px; /*Height of top section*/ 
color: White; 
text-align:center; 
min-width: 950px; 
} 

/* middle collumn */ 
#contentwrapper{ 
float: left; 
width: 100%; 
min-width: 1000px; 
background: #919191; 
} 

#contentcolumn{ 
margin: 0 20% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/ 
}

我試圖解釋什麼，我說什麼，但還是一種新的CSS/HTML，但如果需要更多信息，請告訴我。不確定您是否需要任何html代碼？但如果這樣的病更新。謝謝

來源

2012-08-09 Glen Morse

顯示你的HTML，你可以把一個[小提琴]（http://jsfiddle.net/），使我們能夠理解這個問題更容易。 – krish 2012-08-09 11:00:46

補充說，http://jsfiddle.net/3vm2t/1/也不知道爲什麼左側和右側浮在一旦屏幕是小..但多數民衆贊成在另一個問題..這一個你會注意到底部間隙和collumns我希望它一路下降。無論在列中有什麼內容。 – 2012-08-12 06:25:49

你可以發佈HTML嗎？ – depa 2012-08-12 06:43:57

我認爲你應該使用表格html佈局來做你想做的事情。

你可以把你的列放在<table>，但我認爲最簡潔的方式是使用display: table-cell CSS屬性。

我把編輯HTML/CSS內容的自由：http://jsfiddle.net/TxeJu/

左右移動塊之間的「內容」塊，加display: table-cell財產，並刪除你把在「內容」塊表。

來源

2012-08-12 08:25:10

這很好。不知道我是否完全按照你所說的去做，因爲我不得不添加其他一些東西，比如在contentwarpper之後放置一張桌子，但無論如何它似乎都在工作。帶來了一些其他問題。就像我的右欄不像現在留下的那樣寬，但應該是一個簡單的解決方法。和其他一些事情。但無論如何謝謝！ – 2012-08-12 09:13:40

<html> 
<head> 
    <style type="text/css"> 
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, ol, ul, 
    li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
    font-family:Segoe UI, sans-serif; 
    } 
    .header, .container, .footer { 
    min-height:100px; 
    } 
    .header { 
    background-color:#757575; 
    } 
    .container { 
     background-color:#cccccc; 
    } 
    .footer { 
    background-color:#757575; 
    } 
    .header, .footer, .column { 
    text-align:center; 
    } 
    .column { 
    float:left; 
    min-width:300px; 
    border-left:1px solid blue; 
    border-right:1px solid blue; 
    margin-left:10px; 
    } 
    </style> 
    <script type="text/javascript"> 
    function headerContentFooter(headerRatio, footerRatio) { 
    totalHeight = document.height; 
    headerHeight = 0; 
    containerHeight = 0; 
    footerHeight = 0; 
    if(headerRatio < 0.5 && footerRatio < 0.5) { 
    headerHeight = totalHeight * headerRatio; 
    footerHeight = totalHeight * footerRatio; 
    containerHeight = totalHeight - (headerHeight + footerHeight); 
    document.getElementsByClassName("header")[0].style.height = "" + headerHeight + "px"; 
    document.getElementsByClassName("container")[0].style.height = "" + containerHeight + "px"; 
    document.getElementsByClassName("footer")[0].style.height = "" + footerHeight + "px"; 
    document.getElementsByClassName("header")[0].style.minHeight = "" + headerHeight + "px"; 
    document.getElementsByClassName("container")[0].style.minHeight = "" + containerHeight + "px"; 
    document.getElementsByClassName("footer")[0].style.minHeight = "" + footerHeight + "px"; 
    document.getElementsByClassName("header")[0].style.maxHeight = "" + headerHeight + "px"; 
    document.getElementsByClassName("container")[0].style.maxHeight = "" + containerHeight + "px"; 
    document.getElementsByClassName("footer")[0].style.maxHeight = "" + footerHeight + "px"; 
    } 
    } 
    </script> 
</head> 
<body> 
    <div class="header">HEADER</div> 
    <div class="container"> 
    <div class="column">LEFT</div><div class="column">CENTER</div><div class="column">RIGHT</div> 
    </div> 
    <div class="footer">FOOTER</div> 
    <script type="text/javascript"> 
    headerContentFooter(0.05, 0.05); 
    </script> 
</body> 
</html>

您好，我知道上面的代碼是不是回答你的問題，因爲您的個人資料顯示，你很可能不是JavaScript的傢伙，但有時CSS是不夠的，你應該嘗試利用現代瀏覽器的巨大優勢，但如果你有更少的時間，我們可以幫助你。 請不要嘗試上面的代碼，因爲它工作得很好

來源

2012-08-12 09:37:36 GLES

去試試看。我聽說js可能會解決我的問題，但不知道如何.. – 2012-08-12 10:00:10

試了一下，我得到了相同的結果。左側和右側僅顯示其包含的高度。這裏是使用firefox的圖像http://hostmypicture.com/?v=example.jpg，我所做的只是在頂部添加腳本js，然後將呼叫添加到正文上方。我錯過了什麼？ – 2012-08-12 10:09:25

是啊，這是不工作在Firefox等待幾分鐘我正在尋找這個，即使在歌劇 – GLES 2012-08-12 10:13:55

高度到100％在CSS

回答

相關問題