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可以实现，但我正在计划最大的灵活性（并且可能会产生问题）

<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

您想要弄清楚您希望该中心文本列如何工作。如果你有一个固定宽度的容器，你可以浮动元素，并给它们一个固定的宽度。

许多网格系统（如Bootstrap或Base）都会使用浮动列进行布局。他们还在CSS中使用媒体查询来满足不同的屏幕尺寸。

如果你想要一个具有固定宽度列和可变宽度中心列的布局，并且你确实想自己做事，你可以在主要内容持有者中完全定位。

查看更新后的JSFiddle，了解如何使用位置：绝对来解决问题。

在那里有一些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>
看起来您已尝试关闭网站标题＆＃39;标记在内容的底部。
在左侧，中间和右侧列放置<div>将有助于您在所有三个部分的底部放置页脚。我已经将这个＆＃34;网站页脚重命名为＃34;

希望这有帮助！

Answer 2

我发现，如果我的左/右侧边栏长度增长，那么页面底部开始变得混乱。即jsFiddle 我花了很多时间玩，但无法让它发挥作用。

我不知道calc选项，我认为这使我能够更容易管理（对于像我这样的CSS noob）解决方案，因为我可以远离绝对定位。结果是jsFiddle。我喜欢选择使用类似的东西让左/右栏长到底部 height: calc(100% - 100);
但它似乎没有用，并且可能我不得不深入研究绝对世界以使其发挥作用。

再次感谢您的帮助。

CSS Fixed Header，滚动正文，左侧sidbar / content /右侧sidbar和页脚

2 个答案: