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

【问题标题】：Creating a web page structure with footer at the bottom and 100% content创建一个底部有页脚和 100% 内容的网页结构
【发布时间】：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: 如果我们的内容越来越小于屏幕高度，页脚应该像粘性页脚一样留在底部，但是如果我们有很多内容，我们的页脚应该向下并留在后面内容。始终页脚应该在内容之后

标签： html css twitter-bootstrap

【解决方案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

【讨论】：