Question

我正在尝试创建一个基于CSS的布局：

- A dynamically sized banner.
- A content area that should use all available space.
- A footer that aligns against the bottom of the page.

目前，我有这个。但是，我的挑战是在内容领域工作。在内容区域内，我需要显示：

- A dynamically sized header.
- A content area that uses all available space.
- A footer that aligns at the bottom of the content area, but above the footer mentioned above.

总而言之，我想创建一个如下所示的屏幕：

+------------------------------------+
|            Banner                  |
|                                    |
|------------------------------------|
|            Header                  |
|------------------------------------|
| Some Content                       |
| This needs to be dynamically sized |
| to fill all remaining content      |
|-------------------------------------
|           Toolbar                  |
|------------------------------------|
|            Footer                  |
+------------------------------------+

目前，我有以下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>

  <style type="text/css">
    html, body{
      height: 100%;
      overflow: hidden;
    }

    body {
      padding: 0;
      margin: 0;
      font-size: .85em;
      font-family: Arial, Verdana;
      color: #232323;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div id="banner" style="width:100%; background-color:Black; color:White;">[Banner]</div>

  <div id="content" style="width:100%; height:100%; background-color:Gray; margin:0px 8px 0px 8px;">        
    <h2>Header</h2>

    <div id="contentArea">
      <div id="mainContent" style="background-color:Silver;">The main content goes here.</div>
    </div>

    <div id="toolbar" style="padding:8px 0px 8px 8px;">
      <input type="button" id="refreshButton" value="Refresh" />
      <input type="button" id="addButton" value="Add" />
    </div>
  </div>

  <div id="statusBar" style="background-color:black; color:White; width:100%; position:fixed; bottom:0;">
    <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
      <tr>
        <td style="width:33%;">Info</td>
        <td style="text-align:center; width:34%;">Message</td>
        <td style="text-align:right; width:33%;">Miscellaneous</td>
      </tr>
    </table>
  </div>
</body>
</html>

虽然此屏幕无法呈现。据我所知，当我将“内容”div高度设置为100％时，它意味着整个屏幕的100％。另外，我似乎无法获取“contentArea”div来占用剩余空间，也无法让工具栏与底部对齐。我究竟做错了什么？我该如何做到这一点？

Answer 1

这种“粘性页脚”技术应该有助于解决页脚问题。它会使它粘在底部，但不会像位置那样重叠内容：如果页面滚动，则绝对会重叠。

http://ryanfait.com/sticky-footer/

Answer 2

我相信你问的是如何制作侧栏并且网页的内容部分的高度看起来相同，而不考虑上述任何一个div部分中内容的实际高度。如果这是真的，我相信我认为对你的困境是一个简单的答案。

使用HTML 5和CSS 3，这是我的建议。

从CSS开始：

body{/*enter in your parameters */ }
.container{/*this div surrounds all the other divs and allows you to give percentage based widths in subsequent divs*/ max-width: 1000px; min-width: 760px; maergin: 0, auto, 0, auto; background-color: #000;}
.extraheight{float: left; width: 100%; height: 100%; background-color: #ccc;}
.header{width: 100%; color: #FFF; background-color: #00f; /*just for demo purposes*/ }
.sidebar{float: left; width: 30%; background-color: #ccc; /*match the background of the extraheight div*/ }
.content{float: left; width: 70%; background-color: #ccc; /*matches extraheight and siderbar colors */ }
.footer{color: #FFF; /* must make sure you clear the floats above */ position: relative; /* IE6 to properly clear */ clear: both; /* this clear property forces the .container to understand where the columns end and contain them */ }

一些基本的HTML使用上面的CSS来说明它是如何工作的：

    <div class="container">
    <div class="extraheight">
    <div class="header"><h1>THIS IS MY WEBSITE</h1></div>
    <div class="sidebar">
        <p>This where you put your feed or whatever sidebar content you desire</p>
    </div><!-- ENDS SIDEBAR -->
    <div class="content">
        <h2>This is where you place your content</h2>
        <p>My site is the product of my effort and desire to provide each user with an enjoyable visit. We strive to exceed expectation without comprimising any needs. Check back often as our content is constantly changing.</p>
    </div><!-- ENDS CONTENT -->
    </div><!-- ENDS EXTRAHEIGHT -->
    <div class="footer"><p>Put your footer content here</p></div>
    </div><!-- ENDS CONTAINER -->

我还没有足够的分数来为您提供页面显示方式的截图，但我鼓励您尝试一下。最重要的问题是要么将高度div设置为侧边栏和内容div所需的背景，同时使这些div中的背景透明，或者使侧边栏和内容div与extraheight div具有相同的背景。当使用纯色作为背景时，后者非常容易，但前者是必要的，背景是任何但非常基本的背景。

我希望这能为您提供至少一部分您在发布时感兴趣的信息。我仍在努力学习如何正确解释发布到本论坛的同事提出的问题。唉，我是这个论坛的新手，但快速学习！

祝福和成功，史蒂夫K

具有底部对齐内容的CSS布局问题

2 个答案: