创建一个底部有页脚和 100% 内容的网页结构

Posted 2023-03-06

技术标签:

【中文标题】创建一个底部有页脚和 100% 内容的网页结构【英文标题】：Creating a web page structure with footer at the bottom and 100% content 【发布时间】：2015-08-06 04:56:38 【问题描述】：

我想为一个网页设计一个结构，但是我有一个问题，我不能单独使用它。这就是我想要的：

一个包含 3 个部分的网页：

  1-header
  2-content( has 2 parts, a sidebar and a content section)
  3-footer

我想要这些特征：

  1- if in the content section there is nothing then footer stays at the bottom, if we have content, footer pushes down and stays after my content
  2- my sidebar(exist in the content section) take 100% height of content section and connects to footer

像这样：

我用这段代码构建了它，它可以工作，但我的问题是，如果侧边栏区域的内容变大，侧边栏和主要内容区域会重叠页脚！我希望在这种情况下，页脚留在我的内容之后。

我在工作中使用 Twitter Bootstrap。我不想使用仅在新浏览器中可用的方法。至少 IE 9。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="bootstrap.min.css" />
<link rel="stylesheet"  href="style.css" />
</head>

<body>

    <div class="container-fluid">

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

        <div class="row content">
            <div class="col-lg-2 sidebar">
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
                <div>content</div>
            </div>
            <div class="col-lg-10">content</div>
        </div>

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

这是 CSS：

body,html
  height: 100%;


.container-fluid 
  height:100%;
 


 .header
    background-color: #ccff55;
  

 .content
     background-color: #445566;
     height: -webkit-calc(100% - 10%);
  

  .sidebar
     background-color: #446655;
     height: 100%;
   

   .footer
     background-color: #11ff99;

【问题讨论】：

How do you get the footer to stay at the bottom of a Web page?的可能重复这是对 'calc' 属性的惊人使用... 100% - 10%。哈哈……你试过90%吗？哈哈... @connexo：不，这不是我想要的，这不是重复的帖子。你提到的那篇文章是我问题的一半，只是将页脚放在底部。我也想要 100% 的内容 @SeanStopnik：这是我朋友的结构，而不是 -webkit-calc(100% - 10%);我们可以写 -webkit-calc(100% - 50px);例如。 @Robert: 如果我们的内容越来越小于屏幕高度，页脚应该像粘性页脚一样留在底部，但是如果我们有很多内容，我们的页脚应该向下并留在后面内容。始终页脚应该在内容之后 【参考方案1】：

您可以使用我编写的 js 方法来帮助您修复页面底部的标题：

<script type="text/javascript">
window.onload = function(event)  resizeDiv(); 
window.onresize = function(event)  resizeDiv(); 
function resizeDiv() 
    vpw = $(window).width(); 
    vph = $(window).height()-54;
    $('#main').css('height': vph + 'px');
    $('.container').css('height': vph + 'px');    
    $('.sidebar').css('height': vph + 'px');  
  
 </script>

将 54 调整为页脚的高度。然后，如果您添加到您的 css：

.container
    overflow: scroll;

.sidebar
    overflow: scroll;

您的页脚将始终显示在屏幕底部。否则，当容器的内容大于 js 设置的内容时，页脚将进一步向下。不要忘记在您的 document.ready 函数中设置对 resizeDiv(); 的调用加载页面时使用它。

$(document).ready(function()
    resizeDiv();
);

使用 JS 在所有浏览器上都不会出现问题，甚至在旧版本中也是如此。

【讨论】：

【参考方案2】：

这是重叠的，因为您的 .content 元素的高度计算值比正文高度低 10%。这允许页脚向上爬，导致重叠。

您的内容将始终位于现在的位置，因为您在 CSS 中没有任何内容可以创建使 .content 和侧边栏并排放置的页面，例如使用浮动和调整元素大小。

【讨论】：

【参考方案3】：

尝试以下方法：

.footer 
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;

【讨论】：

【参考方案4】：

好的，试试这个。它对我有用。也许需要一些微调，但基本上这就是你想要的。

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="bootstrap.min.css" />
<link rel="stylesheet"  href="style.css" />
<style type="text/css">
body,html
  height: 90%;
  margin:0px;
  padding:0px;


.container-fluid 
  min-height:100%;
 


 .header
    background-color: #ccff55;
  

 .content
     background-color: #445566;
     height: -webkit-calc(100% - 10%);
  

  .sidebar
     background-color: #446655;
     height: 100%;
   

   .footer
     background-color: #11ff99;
     bottom:0px;
     position:relative; 
     min-width:100%;

   
</style>
</head>

<body>

    <div class="container-fluid">

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

        <div class="row content">
            <div class="col-lg-2 sidebar">

            </div>
            <div class="col-lg-10">
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
            </div>
        </div>


</div><div class="row footer" >
          <div>footer</div>
          <div>footer</div>
          <div>footer</div>
          <div>footer</div>
          <div>footer</div>
        </div>
</body>
</html>

【讨论】：

不，它不起作用，一切都重叠。你测试了吗？ @Fcoder 是的，我做了，事实上我在另一个标签上。我会再检查一遍。【参考方案5】：

css

#wap 
    background-color: #532485;
    width: 80%;
    height: auto;
    margin: auto;

.header 
    background-color: #123456;
    width: 100%;
    height: 60pt;

.menu 
    background-color: #154856;
    width: 100%;
    height: 120pt;

.left 
    background-color: #154896;
    width: 30%;
    height: 200pt;
    float: left;

.center 
    background-color: #897535;
    width: 40%;
    height: 200pt;
    float: left;

.right 
    background-color: #154896;
    width: 30%;
    height: 200pt;
    float: left;

.footer 
    background-color: #567829;
    width: 100%;
    height: 60pt;
    float: left;

ul 
    padding: 0;
    margin: 0;
    list-style: none;

ul li 
    float: left;

ul li ul 
    display: none;

ul li:hover ul 
    display: block;

ul li a 
    background: #f2f2f2;
    text-decoration: none;

ul li a:hover 
    color: #fff;
    background: #128536;
    border-radius: 20px;

html

<div id="wap">
    <div class="header">header</div>
    <div class="menu">
        <ul>
            <li>home</li>

            <li>service
                <ul>
                    <li> a</li>
                    <li> b</li>
                </ul>
            </li>

            <li>about</li>
        </ul>
    </div>
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
    <div class="footer">footer</div>

</div>

喜欢这个

Click here

【讨论】：

以上是关于创建一个底部有页脚和 100% 内容的网页结构的主要内容，如果未能解决你的问题，请参考以下文章

我如何在底部有页脚的所有屏幕上制作所有相同高度的卡片？

页脚和地址栏的 Chrome android 高度/滚动问题

R：读取 csv 文件时删除页眉、页脚和零星的列标题

没有滚动时屏幕底部的 Recyclerview 页脚和滚动时位于列表末尾的 Recyclerview 页脚

将页脚固定到页面底部

如何正确对齐社交页脚和页脚菜单的中心？