Question

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

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

像这样：

enter image description here

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

我使用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;
   }

Answer 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，所有浏览器甚至旧版本都没有问题。

Answer 2

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

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

Answer 3

它是重叠的，因为你的.content元素的高度计算比体高小10％。这允许页脚爬行，导致重叠。

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

Answer 4

尝试以下方法：

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

Answer 5

css

aws s3 cp /filepath s3://mybucket/filename --sse aws:kms --sse-kms-key-id <key id>

HTML

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

像这样

Click here

创建一个页脚结构，页脚底部和100％内容

5 个答案: