Html 创建底部带有页脚和100%内容的网页结构_Html_Css_Twitter Bootstrap

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

html css twitter-bootstrap

Html 创建底部带有页脚和100%内容的网页结构,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我想设计一个网页的结构，但我有一个问题，我不能唯一它。这就是我想要的：包含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 push

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

包含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引导。我不想使用仅在新浏览器中可用的方法。至少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>

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

<!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>


测试
正文，html{
身高：90%；
边际：0px；
填充：0px；
}
.容器液体{
最小高度：100%；
}
.标题{
背景色：#ccff55；
}
.内容{
背景色：#445566；
身高：-webkit计算（100%-10%）；
}
.侧边栏{
背景色：#446655；
身高：100%；
}
.页脚{
背景色：#11ff99；
底部：0px；
位置：相对位置；
最小宽度：100%；
}
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
页脚
页脚
页脚
页脚
页脚

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

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

请尝试以下操作：

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

您可以使用我编写的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>

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

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

使用JS，您在所有浏览器上，甚至在旧版本中都不会遇到任何问题。

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


标题

家
服务

a
b


关于

左边
居中
正确的
页脚

像这样

这可能是对“calc”属性的惊人使用。。。100% - 10%. 哈哈。。。你试过90%了吗？哈哈…@connexo:不，这不是我想要的，这不是重复的帖子。你提到的那篇文章是我问题的一半，只需将页脚置于底部即可。我想要100%的内容too@SeanStopnik：这是一个结构，我的朋友，而不是-webkit-calc（100%-10%）；我们可以写-webkit-calc（100%-50px）；例如。@Robert:如果我们的内容越来越小于屏幕高度，页脚应该像粘性的页脚一样位于底部，但是如果我们有很多内容，页脚应该向下，并在内容之后。总是页脚应该在内容之后。不，它不起作用，所有内容都重叠。你试过了吗？@Fcoder是的，我试过了，事实上我在另一个标签上有。我再查一遍。

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

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

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