100％寬度粘性頁腳+標題，但居中3列內容，高度爲100％？

我想創建一個全寬度固定菜單，全寬頁眉，960px寬中心內容與3列（每個100％的高度）和全寬粘滯頁腳的網頁設計。100％寬度粘性頁腳+標題，但居中3列內容，高度爲100％？

在所有工作示例中，我已經看到標題，內容和頁腳是相同的寬度。

（編輯）我的問題是在任何屏幕尺寸下，使列從屏幕底部伸展到屏幕的全部高度，從頁眉底部到頁面頂部。

我已經做什麼，我想實現一個例子：http://muku.dk/example.jpg

這可能與CSS？

來源

2012-02-02 Cody

要回答你的問題「這可能與CSS？」。是的，這很有可能與CSS – Jawad 2012-02-02 20:46:09

就是這樣。請注意，這只是爲了引導您朝正確的方向發展。你必須通過使用任何技術和粘滯的頁腳粘在那裏你自己的高度相等的列。

標記

<!Doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Title Goes Here</title> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<div id="wrapper"> 
<div id="my_menu"> 
<p>fixed menu width 100%</p> 
</div> 
<div id="container"> 
<div id="my_header"> 
<p>header width 100%</p> 
</div> 
<div id="content"> 
<div id="col1"> 
<p>column 1 width 320px height 100%</p> 
</div> 
<div id="col2"> 
<p>column 2 width 320px height 100%</p> 
</div> 
<div id="col3"> 
<p>column 3 width 320px height 100%</p> 
</div> 
</div> 
<div id="my_footer"> 
<p>sticky footer width 100%</p> 
</div> 
</div> 
</div> 
</body> 
</html>

樣式

* 
{ 
padding: 0; 
margin: 0; 
} 

html, body 
{ 
width: 100%; 
min-width: 100%; 
height: 100%; 
min-height: 100%; 
} 

div#wrapper 
{ 
width: 100%; 
min-width: 100%; 
height: 100%; 
min-height: 100%; 
} 

div#my_menu 
{ 
width: 100%; 
min-width: 100%; 
height: 50px; 
border: 1px solid black; 
background-color: grey; 
position: fixed; 
} 

div#my_menu>p 
{ 
width: 100%; 
min-width: 100%; 
height: 100%; 
min-height: 100%; 
font-size: 50px; 
line-height: 50px; 
font-weight: bold; 
text-transform: uppercase; 
color: red; 
text-align: center; 
} 

div#container 
{ 
width: 100%; 
min-width: 100%; 
height: 100%; 
min-height: 100%; 
padding-top: 50px; 
} 

div#my_header 
{ 
width: 100%; 
min-width: 100%; 
height: 100px; 
border: 1px solid black; 
background-color: yellow; 
} 

div#my_header>p 
{ 
width: 100%; 
min-width: 100%; 
height: 100%; 
min-height: 100%; 
font-size: 100px; 
line-height: 100px; 
font-weight: bold; 
text-transform: uppercase; 
color: red; 
text-align: center; 
} 

div#content 
{ 
width: 960px; 
margin: 0 auto; 
height: 100%; 
min-height: 100%; 
border: 1px solid black; 
background-color: blue; 
overflow: auto; 
} 

div#col1 
{ 
width: 320px; 
height: 100%; 
min-height: 100%; 
outline: 1px solid black; 
background-color: green; 
float: left; 
} 

div#col1>p 
{ 
width: 100%; 
min-width: 100%; 
font-weight: bold; 
text-transform: uppercase; 
color: red; 
text-align: center; 
} 

div#col2 
{ 
width: 320px; 
height: 100%; 
min-height: 100%; 
outline: 1px solid black; 
background-color: orange; 
float: left; 
} 

div#col2>p 
{ 
width: 100%; 
min-width: 100%; 
font-weight: bold; 
text-transform: uppercase; 
color: red; 
text-align: center; 
} 

div#col3 
{ 
width: 320px; 
height: 100%; 
min-height: 100%; 
outline: 1px solid black; 
background-color: gold; 
float: left; 
} 

div#col3>p 
{ 
width: 100%; 
min-width: 100%; 
font-weight: bold; 
text-transform: uppercase; 
color: red; 
text-align: center; 
} 

div#my_footer 
{ 
width: 100%; 
min-width: 100%; 
height: 80px; 
border: 1px solid black; 
background-color: pink; 
} 

div#my_footer>p 
{ 
width: 100%; 
min-width: 100%; 
height: 100%; 
min-height: 100%; 
font-size: 80px; 
line-height: 80px; 
font-weight: bold; 
text-transform: uppercase; 
color: red; 
text-align: center; 
}

EDIT 1

嘗試此。這工作完美。即使沒有足夠的內容，頁腳也會粘貼到底部，並且當內容更多時，頁腳會被壓下。垂直Scroolbar也沒有出現。現在請不要讓我把這些柱子做成同樣的高度。

HTML標記

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Document Title</title> 
<link rel="stylesheet" href="main.css" type="text/css" /> 
</head> 
<body id="index"> 
<div id="wrapper"> 
    <div id="my_menu"> 
    FIXED MENU WIDTH 100% 
    </div> 
    <div id="my_header"> 
    HEADER WIDTH 100% 
    </div> 
    <div id="content"> 
     <p>CONTENT 960px</p> 
     <div id="col1" class="content_columns"> 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     </div> 
     <div id="col2" class="content_columns"> 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     </div> 
     <div id="col3" class="content_columns"> 
     COLUMN 3 WIDTH 320px HEIGHT 100% 
     COLUMN 3 WIDTH 320px HEIGHT 100% 
     COLUMN 3 WIDTH 320px HEIGHT 100% 
     COLUMN 3 WIDTH 320px HEIGHT 100% 
     COLUMN 3 WIDTH 320px HEIGHT 100% 
     </div> 
     <div class="clear_floats"></div> <!-- For Clearing Floats --> 
    </div> 
    <div class="push"></div> <!-- For Sticky Footer --> 
</div> 
    <div id="my_footer"> 
    STICKY FOOTER WIDTH 100% 
    </div> 
</body> 
</html>

樣式CSS

* /* For CSS Reset */ 
{ 
padding: 0; 
margin: 0; 
} 

html, body 
{ 
width: 100%; 
height: 100%; 
} 

div#wrapper 
{ 
width: 100%; 
height: 100%; 
min-height: 100%; /* For Sticky Footer */ 
height: auto !important; /* For Sticky Footer */ 
margin: 0 auto -70px; /* For Sticky Footer */ 
} 

div#my_menu 
{ 
width: 100%; 
height: 50px; 
outline: 1px solid black; 
background-color: grey; 
text-align: center; 
position: fixed; 
} 

div#my_header 
{ 
width: 100%; 
height: 100px; 
outline: 1px solid black; 
background-color: yellow; 
text-align: center; 
padding-top: 50px; 
} 

div#content 
{ 
width: 960px; 
margin: 0 auto; 
outline: 1px solid black; 
background-color: brown; 
text-align: center; 
} 

div.content_columns 
{ 
width: 320px; 
outline: 1px solid black; 
background-color: gold; 
text-align: center; 
float: left; 
} 

div.clear_floats /* For Clearing Floats */ 
{ 
clear: both; 
} 

div#my_footer 
{ 
width: 100%; 
height: 70px; 
outline: 1px solid black; 
background-color: pink; 
text-align: center; 
} 

div.push /* For Sticky Footer */ 
{ 
height: 70px; 
}

希望這有助於。

來源

2012-02-03 21:17:42 Jawad

非常感謝你的時間！但是在你的解決方案中，即使列內的內容小於屏幕的高度，我仍然會得到不必要的滾動。可以避免這種情況嗎？ – Cody 2012-02-05 12:15:56

@Kasper Bjerre：看我的編輯。 – Jawad 2012-02-05 19:25:38

非常感謝你，我非常感謝你的努力！但是，在大屏幕分辨率下，內容不會延伸到屏幕上 - 而且列的確需要有相同的高度（對不起）。也許我需要找到一種方法來使用JavaScript來代替它？ – Cody 2012-02-06 09:25:32

是的，你有什麼試過？這是非常基本的。

你需要把3列放在一個包裝器（或其他東西）和頭部，固定在包裝器外的導航和頁腳。現在，您可以製作導航，頁眉和頁腳100％寬度和包裝960像素。

來源

2012-02-02 20:47:23

感謝您的回答，但我的問題是使列從屏幕的底部到頁腳頂部，以任何屏幕尺寸伸展到屏幕的整個高度。任何想法如何實現？ – Cody 2012-02-02 20:52:05

它們被稱爲等高柱。 Flex列是一種方式 - http://www.vanseodesign.com/css/equal-height-columns/ - http://css-tricks.com/fluid-width-equal-height-columns/ - http：// woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/ - http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no -hacks - http：// buildinternet。com/2009/07/four-methods-to-create-equal-height-columns/- – Jawad 2012-02-02 21:01:13

謝謝，但它不足以讓柱子具有相同的高度 - 它們也需要位於960 px寬的居中容器並從（100％寬）標題延伸到（100％寬）粘腳 – Cody 2012-02-02 21:14:37

100％寬度粘性頁腳+標題，但居中3列內容，高度爲100％？

回答

相關問題