文章/答案/技术大牛

发布

社区首页 >问答首页 >创建一个底部有页脚和100%内容的网页结构

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

Stack Overflow用户

提问于 2015-05-25 00:57:11

回答 5查看 691关注 0票数 5

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

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

如下所示：

我用这段代码构建了它，它可以工作，但我的问题是，如果侧边栏区域的内容变得更大，侧边栏和主要内容区域会与页脚重叠！我希望在这种情况下，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;
   }

html

css

twitter-bootstrap

回答 5

Stack Overflow用户

发布于 2015-05-25 01:38:31

您可以使用我编写的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在所有浏览器上都不会有问题，甚至在旧版本中也不会有问题。

票数 3

Stack Overflow用户

发布于 2015-05-25 01:10:22

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

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

票数 1

Stack Overflow用户

发布于 2015-05-25 01:14:04

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30425998

复制

相似问题

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

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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