Question

我制作了一个非常简单的网站。您可以在此处查看页面（代码如下）：https://googledrive.com/host/0B2uK7byfkiwySHc5eU5CM25kcmM/index.html

我的问题是内容div（带有示例代码，位于导航栏下方）。我需要它直到页脚。我需要它直到页脚，无论我如何调整页面大小，从不在它下面，也不会在它和页脚之间留下太多空间。

如果内部的内容不需要它，我会好的，但是，如果内容是可滚动的，我需要它直到页脚。此外，我不希望整个页面滚动，只有这个内容div。

我尝试了许多解决方案（容器div，表格，jquery resizing等）失败，但是如何实现这一点却是一种损失。所以，我上传了没有我的解决方案的基本代码，看看是否有人可以帮助我:)

谢谢！

<html>
    <head>

    <style type="text/css">

    body {
       background: #e6e6e6; 
    }

    #title{
      margin:0 0 0 0;
      text-align: center; font-size:40px;

      font-family: "League-Gothic", Courier;
      color: #707070; font-weight:600;
    }

    #navbar ul { 
      margin: 0; padding: 5px; 
      list-style-type: none; 
      text-align: left; background-color: #005ab3; 

      border-top-left-radius: 5px; 
      border-top-right-radius: 5px;
    } 

    #navbar ul li {  
      display: inline; 
      font-family: Arial;
    } 

    #navbar ul li a { 
      text-decoration: none; 
      padding: .2em 1em; 
      color: #fff; 
      background-color: #005ab3; 
    } 

    #navbar ul li a:hover { 
      color: #005ab3; 
      background-color: #fff; 
    } 

    #content {
      background-color: #fff; font-family: Arial;
      border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
      padding: 5px; padding-left: 15px; padding-right: 15px;

      height: 70%;
      overflow: auto;
    }

    #footer {
      position: fixed;
      bottom: 0; left:0; width: 100%;

      background: #005ab3;

      line-height: 2;
      text-align: center; color: #fff;
      font-size: 15px; font-family: sans-serif; 
    }

    </style>
    </head>

    <body>
      <div id = "title">Title</div>

      <div id = "navBar">
        <ul> 
          <li><a id ="link1" href="#">Link 1</a></li> 
          <li><a id ="link2" href="#">Link 2</a></li> 
          <li><a id ="link3" href="#">Link 3</a></li> 
        </ul> 
      </div>

      <div id = "content">

        <h1> Sample content (1984)</h1>
        <p>It </p> 
        <p>The </p> 
        <p>Inside </p>
        <p>Outside,  </p>
        <p>Behind  </p>
        <p>Winston  </p>
        <p>The </p>
        <p> WAR IS PEACE </p>
        <p> FREEDOM IS SLAVERY </p>
        <p> IGNORANCE IS STRENGTH </p>

    </div>

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

  </body>
</html>

Answer 1

看看这个jsFiddle。

如果这不是你想要的，请告诉我。

.title-bar {
    position: fixed;
    width: 100%; 
    top: 0;
    background-color: #ccc;
}

Answer 2

看看这个小提琴：http://jsfiddle.net/c92z2/

我想我明白你在说什么，我从这里得到了一个很好的答案：CSS 100% height with padding/margin

他写了一篇关于拉伸内容框的好方法。

.stretchedToMargin {
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-top:20px;
    margin-bottom:20px;
    margin-right:80px;
    margin-left:80px;
    background-color: green;
}

如何将div从导航栏拉到页脚？

2 个答案: