Question

到目前为止，我主要是在后端工作，但我现在也必须做一些前端。

我必须制作如下网页：

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

外部框应始终填满整个窗口：页眉和页脚应始终可见。当屏幕区域不够大时，内框（包含内容）应该可以滚动。

除此之外，还应该有一个从上到下的渐变。

CSS可以实现吗？如果是这样，我该怎么做？

编辑：
我想我解决了。部分是因为我收到了很多相关的问题（我搜索过，但没有找到，但相关的问题表明了方式），部分是因为答案 'IP ADDRESS'。

有了这些帮助我现在做了以下，似乎做了我需要做的事情：

<?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>

Answer 1

尝试这个＆gt;＆gt;＆gt;

 <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/

如果您需要更多帮助，请回复。谢谢

页眉和页脚始终可见

1 个答案: