標題和腳始終可見

到目前爲止，我主要在後端工作，但我現在也必須做一些前端工作。標題和腳始終可見

我必須做出一個網頁像下面這樣：

+---------------------------------------------------------------------+ 
    |                  | 
    | Header               | 
    |                  | 
    |  +------------------------------------------------------+  | 
    |  |              |  | 
    | G |              |  | 
    | r |              |  | 
    | a |              |  | 
    | d |             S |  | 
    | i |             c |  | 
    | e |             r |  | 
    | n |             o |  | 
    | t |             l |  | 
    |  |             l |  | 
    |  |             b |  | 
    |  |             a |  | 
    |  |             r |  | 
    |  |              |  | 
    |  |              |  | 
    |  +------------------------------------------------------+  | 
    |                  | 
    | Footer               | 
    |                  | 
    +---------------------------------------------------------------------+

外盒應始終填寫完整的窗口：頁眉和頁腳應始終是可見的。當屏幕格局不夠大時，內部框（包含內容）應該變成可滾動的。

除此之外，還應該有一個從頂部到底部的漸變。

這是可能的CSS？如果是這樣，我將如何做到這一點？編輯：
我想我解決了它。部分原因是我收到了很多相關的問題（我搜索了，但沒有找到，但相關的問題顯示了方式），部分原因是因爲IP地址爲。

有了這些幫助我現在做了如下，似乎什麼做什麼，我需要：

<?xml version = "1.0" encoding="utf-8"?> 
<!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" xml:lang = "nl" lang = "nl"> 

<html> 
    <head> 
    <style> 
     html, body { 
     height:   100%; 
     margin:   0px; 
     } 

     #container { 
     background:  linear-gradient(blue, white); 
     height:   100%; 
     margin:   auto; 
     width:   100%; 
     } 

     #main { 
     overflow:   auto; 
     } 

     #content { 
     background-color: white; 
     border:   1px solid black; 
     border-radius: 10px; 
     margin-left:  auto ; 
     margin-right:  auto ; 
     } 

     #footer { 
     height:   auto; 
     margin:   auto; 
     position:   relative; 
     width:   100%; 
     } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
    <script type="text/JavaScript"> 
     function doResize() { 
     var footer_height = $('#footer').height() 
     footer_height  += 2 
     $('#footer').css('margin-top', '-' + footer_height + 'px') 
     $('#main').css('padding-bottom', footer_height + 'px') 
     var footer_position = $('#footer').offset().top + window.screenY 
     var content_position = $('#content').offset().top + window.screenY 
     var newHeight  = footer_position - content_position - 2 
     var newWidth   = $(document).width() - 100 
     $('#content').css({ 
      'height': newHeight, 
      'width': newWidth 
     }) 
     } 
     $(document).ready(function() { 
     doResize() 
     }) 
     $(window).resize(function() { 
     doResize() 
     }) 
    </script> 
    </head> 

    <body> 
    <div id="container"> 
     <div id="main"> 
      <div id="header"><div class="header">Header</div></div> 
      <div id="content">Content</div> 
     </div> 
    </div> 
    <div id="footer"><div class="footer">Footer</div></div> 
    </body> 
</html>

來源

2014-04-28 Cecil Westerhof

這太寬泛了。 – Liam

你真的需要自己去發表一些代碼。沒有人會願意爲了你而去幹你的工作。這並不意味着苛刻的順便說一句。我們都想通過找出解決方案來相互幫助，但最好首先自己動手。 –

@BillyMoat雖然他畫了一個漂亮的圖表，但必須已經過時了 – rorypicko

試試這個>>>

<div id="container" style="background: linear-gradient(to bottom right, red , blue); height:100%;width:100%;"> 
<div id="header"> 
    Header 
</div> 

<div style="text-align:center;width:100%;"> 
<div id="sroll_box" style="width:250px;height:200px;overflow:auto;background-color:brown;text-align:center;margin-left:auto;margin-right:auto;"> 
    Content 
</div></div> 

<div id="footer"> 
    Footer 
</div> 
</div>

http://jsfiddle.net/6FLMz/

請評論回來，如果你需要更多的幫助。謝謝

來源

2014-04-28 16:10:55

標題和腳始終可見

回答

相關問題