html - 用CSS将页面分成3个部分-6ren

html - 用CSS将页面分成3个部分

转载作者：太空宇宙更新时间：2023-11-03 23:53:21

25

4

我正在尝试将一个页面分成 3 个部分。页眉、正文和页脚。我找到了 this接近我需要的博客文章。但是，当您向上或向下滚动时，采用他的方法的页眉和页脚会粘在窗口上。

此外，我想要在 body 部分内添加一个额外的 div，它水平和垂直居中，固定宽度为 600px。并且高度应该是自动的但不与页眉或页脚重叠。因此，这两个部分之间也应该有一个填充。

我用了his居中部分的方法效果很好。但我也在使用 Twitter Bootstrap 3。而且我从来没有得到我想要的结果。

有人能帮我至少了解一下在没有 TB3 的情况下也能正常工作的基础知识吗？

提前致谢!

[编辑]总而言之，我想要的是:

页面分为 3 个部分，页脚和页眉不粘在窗口上；
将 div 置于正文部分的中央，宽度固定，高度不断增加，且不应与页眉或页脚重叠；

[编辑 2]抱歉，我忘了说页眉和页脚的高度固定为 65px。

最佳答案

不知道里面有多高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。把这个放在 <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 中成功测试。

关于html - 用CSS将页面分成3个部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19356854/

25

4

0

文章推荐： java - 无法使用 C 在客户端读取消息

文章推荐： python - F.monotonically_increasing_id() 返回长随机数

文章推荐： socket.io 的 C 客户端

文章推荐： c - C 中的所有权约定

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

html - 用CSS将页面分成3个部分