Question

我正在尝试将页面分为3个部分。标题，正文和页脚。我找到了this博文，接近我的需要。但是当你向上或向下滚动时，带有他的方法的页眉和页脚会粘在窗口上。

此外，我希望在身体部分内部额外div水平和垂直居中，固定宽度为600px。并且高度应该是自动的，但不会与页眉或页脚重叠。所以填充也应该在这两个部分之间。

我使用his方法进行定心部分，效果非常好。但我也在使用Twitter Bootstrap 3。我从来没有得到我想要的结果。

有人可以帮我解决这个没有TB3的基础知识吗？所以我可以从那时起弄清楚它是否可以与TB3一起使用？

提前致谢！

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

页面分为3个部分，其中页脚和页眉不会粘在窗口上;
将div居中放置在身体部分内，其宽度固定，高度不应与页眉或页脚重叠;

[编辑2] 对不起，我忘了提到页眉和页脚的固定高度为65px。

Answer 1

在不知道内部div的高度有多高，以及高度可变的情况下，创建一个通用的解决方案非常困难，特别是考虑到不同的设备和计算机有不同的屏幕尺寸和分辨率。除此之外，您的页眉和页脚也可能具有可变高度，因此也会使事情变得复杂。

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

在下面的示例中，我使用jQuery轻松完成JavaScript。您可以从their site here下载，只需将其包含在您的代码中即可。

这是一个基本示例（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。将其放在HTML的<head>...</head>部分。我试图尽可能地评论，但如果有什么不清楚的地方请告诉我：

<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进行测试。

Answer 2

由于您使用的是Twitter Bootstrap 3，因此您可以使用＆＃34; Sticky页脚导航栏＆＃34;模板位于您从http://getbootstrap.com/主页获取的zip文件的examples文件夹中。

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

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

只需从class属性中删除navbar-fixed-top。

制作600px宽的容器：创建自己的css文件，将其包含在index.html的HEAD部分中并添加

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

您还需要添加mediaqueries来覆盖较小视口大小的基本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％宽度是因为如果您在该宽度下强制页面宽度为600px，您将失去网站的响应宽度。

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

在index.html文件中包装容器div，如下所示：

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

并更改#wrap＆gt; .container部分CSS：

.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

您可能需要进行一些调整才能让它按照您的需要进行调整，但使用这些可以为您提供良好的开端。

Answer 3

尝试：

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;
}

用css将页面分为3个部分

3 个答案: