CSS佈局和內容滾動

我需要一個Web應用程序佈局如下：CSS佈局和內容滾動

+---------------------------------------------+ 
|     header     | 
+-------------------------------------------+-+ 
|           |#| 
|     content     | | 
|           |#| 
+-------------------------------------------+-+ 
|     footer     | 
+---------------------------------------------+

頁眉/頁腳應該總是在瀏覽器頁面的頂部/底部。他們沒有固定的高度。

內容應填充可用空間並可選擇獲取滾動條（用＃表示）。滾動條不應該覆蓋整個窗口。

我需要這個工作在IE> = 7，Chrome和Firefox。

到目前爲止，我嘗試了不同的divs和表格，但都失敗了，因爲我無法獲得內容以準確填充可用空間。

更新：頭和頁腳的高度應通過他們自己的內容來確定（例如報頭可以包括一個菜單，頁腳由JavaScript設定的通知）。

添加樣本：

這應該顯示我正在嘗試做什麼。問題是（除了不工作:)）是'外'div的高度大於窗口。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%"> 
<head> 
    <script src="../lib/jquery-1.4.2.min.js" type="text/javascript"></script> 
    <style type="text/css"> 
    .header { width: 100%; background-color: red; } 
    .footer { width: 100%; background-color: blue; }  
    .content { overflow: auto; height: 100%; } 
    </style> 
    <script type="text/javascript"> 

     $(function() 
     { 
     $("#grow").click(function() { var a=$("<div>test</div>").hide(); $(".header").append(a); a.slideDown(); }); 
     $("#toggle").click(function() { $("#text").toggle(); }); 
     }); 

    </script> 
</head> 
<body style="height: 100%"> 
    <div id="outer" style="height: 100%"> 
    <div class="header"> 
     header <a id="grow" href="#">grow</a> 
    </div> 
    <div class="content"> 
     <h3> 
     Lorem:</h3> 
     <p> 
     <a id="toggle" href="#">toggle</a> 
     </p> 
     <p id="text"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing 
     neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
     Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam 
     posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo 
     nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras 
     interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat 
     mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing 
     neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
     Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam 
     posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo 
     nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras 
     interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat 
     mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus. 
     Vestibulum consequat vestibulum neque. Donec sagittis nisl sed sem dapibus accumsan. Praesent at ipsum enim. Nullam tellus 
     sem, lobortis aliquet aliquet nec, volutpat vitae felis. Fusce dui leo, elementum sit amet varius sed, dictum non enim. 
     </p> 
    </div> 
    <div class="footer"> 
     footer 
    </div> 
    </div> 
</body> 
</html>

來源

2010-10-06 laktak

所以，如果頁眉和頁腳沒有固定的高度，什麼高度是什麼人？還有什麼填補了「內容」空間？ – Nellius 2010-10-06 10:51:36

更新了問題。「內容」由內容填充，例如，文本，列表，Flash等 – laktak 2010-10-06 11:27:13

你必須做出選擇，你不能有非確定的高度粘性的頁腳...... – Guillaume86 2010-10-08 15:29:19

最後我不得不聯合使用JavaScript與resize事件：

<html> 
<head> 
    <script type="text/javascript" src="~/Scripts/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 
    $(function() 
    { 
     var resize=function() { $(".dynamic-y").each(function (i, x) { $(x).height($(window).height()-$(".footer").outerHeight()-$(x).offset().top); }); }; 
     $(window).resize(resize); 
     resize(); 
    }); 
    </script> 
</head> 
<body> 
    <div class="header"> 
    ... 
    </div> 
    <div class="page dynamic-y"> 
    ... 
    </div> 
    <div class="footer"> 
    ... 
    </div> 
</body> 
</html>

來源

2010-11-15 14:58:01 laktak

http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/

只是改變

#content { 
    background: #fff; 
    position: absolute; 
    top: 100px; 
    left: 150px; 
    width: 700px; 
    height: 500px; 
}

高度：自動;

max-height：無論你想要什麼

overflow-x：hidden;

overflow-y：auto;

來源

2010-10-06 11:01:24 KhanZeeshan

雖然你想專門設置一個高度，所以它在所有瀏覽器中看起來都一樣，但據我所知IE7不支持最大高度。 – jimplode 2010-10-06 11:13:51

這對我來說根本不起作用。頁腳應該放置在瀏覽器窗口的底部。 – laktak 2010-10-06 11:29:27

爲了將頁腳放置在底部，您應該給min-height：500px;因爲在DIV裏如果你不給HEIGHT，LEFT，FLOAT等等，他們會互相重疊。 – KhanZeeshan 2010-10-06 11:39:52

我很困惑，你在找什麼。你說你想要一個內容部分的滾動條，但是你知道瀏覽器會在需要時自動提供滾動條嗎？

下面的HTML頁面呈現你所描述的佈局（我認爲），但如果要強制滾動條到.content部分出於某種原因，那麼眼前這個額外的行添加到CSS：

.content { height : 300px; overflow-y:auto; }

See my code run on jsFiddle.net

順便說一句，我刪除的內容，我覺得是從你的HTML不必要的代碼，如width:100;等

CODE：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%"> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css"> 
    <style type="text/css"> 
    html, body{ height:100%; } 
    #outer{ /* footer stick to bottom */ min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -1.5em; /* end footer stick to bottom */ } 
    .header { background-color: red; } 
    .footer, .push { height: 1.5em; } 
    .footer { position:relative; background-color: blue; text-align:center;} 
    </style> 
    <script type="text/javascript"> 
    $(function() 
    { 
    $("#grow").click(function() { var a=$("<div>test</div>").hide(); $(".header").append(a); a.slideDown(); }); 
    $("#toggle").click(function() { $("#text").toggle(); }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="outer"> 
    <div class="header"> 
     header <a id="grow" href="#">grow</a> 
    </div> 
    <div class="content"> 
     <h3>Lorem:</h3> 
     <p><a id="toggle" href="#">toggle</a></p> 
     <p id="text"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing 
     neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
     Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam 
     posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo 
     nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras 
     interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat 
     mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing 
     neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
     Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam 
     posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo 
     nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras 
     interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat 
     mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus. 
     Vestibulum consequat vestibulum neque. Donec sagittis nisl sed sem dapibus accumsan. Praesent at ipsum enim. Nullam tellus 
     sem, lobortis aliquet aliquet nec, volutpat vitae felis. Fusce dui leo, elementum sit amet varius sed, dictum non enim. 
     </p> 
    </div> 
    <div class="push"></div> 
    </div> 
    <div class="footer">footer</div> 
</body> 
</html

來源

2010-10-06 15:11:49 JohnB

我不想將內容設置爲固定高度 - 它應隨窗口大小而增長。 – laktak 2010-10-06 16:09:37

所以這個答案根本沒有幫助你？ – JohnB 2010-10-14 19:09:03

對不起，沒有使用你的代碼，但這裏是什麼，我想你想要做一個基本的輪廓。

<!DOCTYPE html> 
<head> 
    <style type="text/css"> 
    html { 
     min-height: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
    } 
    body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
    } 
    .wrap { 
     width: 900px; 
     margin: 0 auto 0; 
     padding: 0; 
    } 
    .head { 
     width: 900px; 
     background: black; 
     color: white; 
     min-height: 20px;/* just for example */ 
     display: block; 
     position: fixed; 
     z-index: 1000; 
     top: 0; 
    } 
    .content { 
     width: 900px; 
     background: gray; 
     color: black; 
     height: 100%; 
     display: block; 
     overflow-y: auto; 
     margin: 20px 0 20px 0; /* top and bottom margins must be the height of your header/footer, respectively */ 
    } 
    .footer { 
     width: 900px; 
     background: black; 
     color: white; 
     min-height: 20px; 
     display: block; 
     position: fixed; 
     bottom: 0; 
     z-index: 1000; 
    } 
    </style> 
</head> 
<body> 
    <div class="wrap"> 
     <div class="head"> 
      <!-- your header content--> 
      test 
     </div> 
     <div class="content"> 
      <!-- main content, scrollable --> 
      test 
     </div> 
     <div class="footer"> 
      <!-- your footer content --> 
      test 
     </div> 
    </div> 
</body> 
</html>

它似乎沒有我，你要使用一個棘手的頁腳，所以你可以只使用position: fixed; bottom: 0保持它在那裏。

由於您在設計高度/最小高度爲100％的<div id="outer">時，它會從父元素派生它的高度，所以這就是爲什麼您需要滾動條。 html, body {overflow: hidden}照顧到這一點。

爲您的內容，添加overflow-y: auto

唯一棘手的部分是你必須有保證金頂部和底部的聲明，所以你不要有內容由您的頁眉和頁腳重疊。也許一些JavaScript動態選擇您的頁眉/頁腳高度，並將它們添加到您的內容頁邊距。

是這個越來越近？

來源

2010-10-18 16:08:43 davidg

我想你不需要有你的標題位置：固定。只是一個想法。 – davidg 2010-10-18 16:12:59

CSS佈局和內容滾動

回答

相關問題