0

我正在尝试将页面分为 3 个部分。页眉、正文和页脚。我发现这篇博客文章与我需要的很接近。但是当你向上或向下滚动时，他的方法的页眉和页脚会粘在窗口上。

此外，我想要一个额外div的主体部分，它水平和垂直居中，固定宽度为 600 像素。并且高度应该是自动的，但不能与页眉或页脚重叠。所以这两个部分之间也应该有一个填充。

我将他的方法用于居中部分，效果很好。不过我Twitter Bootstrap 3也在用。我从来没有得到我想要的结果。

有人可以帮助我解决这个问题的基本知识TB3吗TB3？

提前致谢！

[编辑] 总结一下我想要的是：

  1. 一个页面分为 3 个部分，其中页脚和页眉不粘在窗口上；
  2. div以固定宽度和不与页眉或页脚重叠的高度增长的主体部分居中；

[编辑 2] 抱歉，我忘了提到页眉和页脚的固定高度为 65 像素。

4

3 回答 3

2

在不知道内部div高度有多高以及高度可变的情况下，很难创建一刀切的解决方案，尤其是考虑到不同的设备和计算机具有不同的屏幕尺寸和分辨率。添加到此问题的是您的页眉和页脚也可能具有可变高度，因此这也使事情变得复杂。

为了避免这些怪癖，并更好地控制您的不同div高度以及它在页面上的位置，我会考虑使用 JavaScript 来控制它的位置。这样，您可以监控其高度何时发生变化（取决于您计划做什么），并根据其当前高度动态移动它。

在以下示例中，我使用 jQuery 轻松完成 JavaScript。您可以从他们的网站下载，然后将其包含在您的代码中。

这是一个基本示例（首先是 HTML）：

<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>

然后是一些CSS：

html, body {
    height: 100%;
    min-height: 400px; /* to cater for no element 'collision'... */
    margin: 0;
    padding: 0;
    position: relative; /* to keep header and footer positioned correctly... */
}

#header {
    background-color: green;
    height: 65px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#container {
    background-color: red;
    width: 600px;
    height: 40%;
    position: absolute;
    left: 50%;
    margin-left: -300px; /* 50% over, then move back 300px to center... */
}

#footer {
    background-color: orange;
    height: 65px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

最后，你的 JavaScript。把它放在<head>...</head>你的 HTML 部分。我已尝试尽可能多地发表评论，但如果有任何不清楚的地方，请告诉我：

<script src="./path/to/jquery.js"></script>
<script>

    // this will run this function as soon as the page is loaded...
    $(function(){

        // bind the resize event to the window...
        // this will call the 'centerMyContent' function whenever the
        // window is resized...
        jQuery(window).bind('resize', centerMyContent);

        // call the 'centerMyContent' function on the first page load...
        centerMyContent();

    });

    // the actual centring function...
    function centerMyContent(){

        // get the body and container elements...
        var container = jQuery('#container');
        var body = jQuery('body');

        // work out the top position for the container...
        var top = (body.height() / 2) - (container.height() / 2);

        // set the container's top position...
        container.css('top', top + 'px');

    }

</script>

我希望这可以帮助您走上正轨！在 Chrome、Firefox 和 Internet Explorer 7、8、9 和 10 中成功测试。

于 2013-10-14T09:45:46.940 回答
1

由于您使用的是 Twitter Bootstrap 3，因此您可以从http://getbootstrap.com/主页的 zip 文件的示例文件夹中的“粘性页脚导航栏”模板开始。

摆脱粘性导航栏：打开 index.html 并转到第 31 行，它有这个：

<div class="navbar navbar-default navbar-fixed-top">

只需从类属性中删除 navbar-fixed-top 即可。

使容器宽 600 像素：创建自己的 css 文件，将其包含在 index.html 的 HEAD 部分中并添加到那里

#wrap > .container {
    width: 600px;
}

您还需要添加媒体查询以覆盖较小的视口大小的基本 tb3 样式，并在那里添加 600px。所以在那个类型之下：

@media (max-width: 1199px) {
    #wrap > .container {
        width: 600px;
    }
}

@media (max-width: 991px) {
    #wrap > .container {
        width: 600px;
    }
}

@media (max-width: 767px) {
    #wrap > .container {
        width: 100%;
    }
}

@media (max-width: 480px) {
    #wrap > .container {
        width: 100%;
    }
}

那些 100% 的宽度是存在的，因为如果您强制页面的宽度低于该宽度 600 像素，您将失去网站的响应宽度。

最后一部分，垂直居中。你确定你需要它吗？页面上会有多少信息？变化很大吗？例如，当您使用移动设备查看网站时会发生什么？您可以使用 HTML 和 CSS 来实现它，只需添加几个 div 和一些 css。

在 index.html 文件中像这样包装容器 div：

<div class="outercontainer">
   <div class="middlecontainer">
      <div class="container">
        Content
      </div>
   </div>
</div>

并将 CSS 的 #wrap > .container 部分更改为：

.outercontainer {
  display: table;
  height: 100%;
  position: absolute;
  width: 100%;
}

.middlecontainer {
  display: table-cell;
  padding: 65px 0; /*For your header and footer*/
  vertical-align: middle;
}

.container {
  height: auto;
  margin: 0 auto;
  max-width: 600px;
  position: relative;
}

这是垂直居中的 Codepen：http ://codepen.io/anon/pen/Gposw

您可能需要进行一些调整才能使其按您想要的方式工作，但使用这些可以为您提供良好的开端。

于 2013-10-14T10:34:46.760 回答
0

尝试：

JavaScript：

<div class = "row-fluid">
 <div class = "header">
 </div>
</div>

<div class = "row-fluid">
 <div class="container main">

 </div>
</div>

<div class = "row-fluid">
 <div class = "footer">
 </div>
</div>

CSS：

.header, .footer {
height: 65px;
}

.container.main {
width: 600px;
}
于 2013-10-14T10:42:23.467 回答