html - CSS 固定页眉，带有左侧边栏/内容/右侧边栏和页脚的滚动主体

Question

上周我一直在尝试调整布局并继续从头开始重建但没有成功，因此寻求帮助。

我正在努力实现 1.固定标题，不滚动且始终可见 2. 带有左侧边栏(导航)/内容/右侧边栏(广告)的主区域滚动 3. 只有滚动到底部时才可见的页脚

我的愿景是:

|--------------------------------|
| header (always viewable )      |
|--------------------------------|
||  L  |                  |  R  ||
||  e  |                  |  i  ||
||  f  |                  |  g  ||
||  t  |                  |  h  ||
||     |                  |  t  ||
||  S  |   Content Area   |     || 
||  i  |                  |  S  || 
||  d  |                  |  i  ||
||  e  |                  |  d  ||
||  b  |                  |  e  ||
||  a  |                  |  b  ||
||  r  |                  |  a  ||
||     |                  |  r  ||
||------------------------------||
|| footer visible at end scroll ||
||------------------------------||

HTML 的基本结构有几个 div 比可以完成的要多，但我正在计划最大的灵 active (并且可能会产生问题)

<div class="site-container">

  <div class="site-header">
    SITE HEADER
    <!-- HEADER CONTENT GOES HERE -->
  </div> <!-- site-header -->

  <div class="site-content">
    SITE-CONTENT (with reduced padding not visible )

    <div class="content-main">

      <div class="content-main-left">
        CONTENT-MAIN-LEFT ( Navigation )
      </div>

      <div class="content-main-middle">
        CONTENT-MAIN
        <!-- MIDDLE COLUMN CONTENT GOES HERE -->
        Lorem ipsum dolor etc ...
      </div>

      <div class="content-main-right">
        CONTENT-MAIN-RIGHT ( Ads )
      </div>

      <div class="content-footer">
        CONTENT-FOOTER
      </div>

    </div>    <!-- content-main -->

  </div>      <!-- site-content -->

</div>    <!-- site-container -->

然而，我玩得越多，它变得越乱、越行不通。我目前陷入了一边解决一个问题一边制造另一个问题的循环。

这是我的 JSFiddle版本

非常感谢任何帮助。谢谢

Answer 1

您需要确定中央文本栏的工作方式。如果您有一个固定宽度的容器，您可以 float 元素，并给它们一个固定的宽度。

许多网格系统，如 Bootstrap或 Base使用 float 列来布局。他们还在 CSS 中使用媒体查询来适应不同的屏幕尺寸。

如果您想要一个具有固定宽度列和可变宽度中央列的布局，并且您确实想自己做一些事情，您可以绝对定位在您的主要内容容器中。

查看更新的 JSFiddle了解如何使用 position:absolute 进行布局。

其中对您的 HTML 进行了一些更新，但 CSS 布局如下:

   .site-header {
      position: fixed;
      top:0px;
      width: 100%;
      height: 50px;
      padding:20px 0;
      z-index:2;
    }

    .content-main-left {
      width:100px;
      min-height:200px;
      position:absolute;
      left:0;
      background-color: tan;
    }

    .content-main {
      padding:0 120px 0 120px; /* padding to make room for the left and rigth columns */
    }

    .content-main-right {
      width:100px;
      min-height:200px;
      position:absolute;
      right:0;
      top:0;
      background-color: rosybrown;
    }

    .site-content {
      position:relative;
      top:120px;
    }

    .content-footer {
      position: relative;
      left:0;
      height: 60px;
      width: 100%;
    }

剥离事物并一次让一件事起作用总是好的。有几行可能没有帮助:

• 左栏<div>没有关闭，所以您的主要内容位于 <div> 中
• 您似乎已尝试关闭内容底部的“site-header”标签。
• 将 <div>在左列、中列和右列周围添加页脚将帮助您在所有三个部分的底部放置一个页脚。我已将此重命名为“站点页脚”

希望这对您有所帮助!