Question

好吧我不知道我是不是已经完全错了，或者只是不知道如何做对。

我希望我的网站布局如下：

我在标题和内容周围放了一个名为'myWrap'的div。并添加了这个css：

.myWrap {
    position: absolute;
    padding: 0px;
    margin: 0px;
    background: white;
    top: 2%;
    left: 2%;
    right: 2%;
}

.footer {
    position: absolute;
    background: #363130;
    margin-top: 2%;
    height: 300px;
    left: 0;
    width: 100vw;
}

并且页脚不在myWrap-div中。但现在它只是在内容后面浮动，因为myWrap的位置是绝对的。如何将标题和内容放在正常流程中但不在背景之下？

我按照这样构建了html：

<div class="row container-fluid myWrap">
    CONTENT
    <div class="container-fluid footer">
        FOOTER
    </div>
</div>

如果我将页脚放在myWrap div之外，它会在顶部开始浮动，或者只是重叠内容/标题

Answer 1

将.myWrap更改为position: relative，您的页脚将获取正文的绝对位置，因为它没有父元素具有相对位置CSS属性。

 .myWrap {
     position: relative;
 }

这样，您的页脚将始终位于myWrap的底部。然后你可以使用顶部/底部属性并将它放在你想要的位置;）

我创建了一个Bootply来展示它是如何工作的：http://www.bootply.com/8Wmx3CJHFv

Answer 2

试试这个

<div class="myWrap">
 <div class="container">
  <div class="row">

然后在容器结束后添加页脚

Answer 3

就个人而言，我不会使用你自己的包装器。 Bootstrap是有原因的，因为它们可以完美地用于响应式视口。

我建议你加强这样的事情：

<强> HTML

<html>
   <body>
       <header>
           <div class="container">
              <div class="row">
                  <div class="col-lg-12">
                      // content here
                  </div>
              </div>
           </div>    
       </header>
       <section id="content">
           <div class="container">
              <div class="row">
                  <div class="col-lg-12">
                      // content here
                  </div>
              </div>
           </div>    
       </section>
       <footer>
           <div class="container-fluid">
              <div class="row">
                  <div class="col-lg-12">
                      // content here
                  </div>
              </div>
           </div>    
       </footer>
   </body>
</html>

<强> CSS

body {background-color: #FFF;}
footer {background-color: #FFF;}
header {background-color: #FFF;}
.container-fluid {padding: 0 0;}

请确保删除.container-fluid的填充。还有一个提示：如果你想创造自己的包装纸，不要用绝对的方式来定位它们，而要用相对的方式来定位它们。否则它在所有视口上都无法正常工作。

Answer 4

您提到您正在使用引导程序，在引导程序中，容器类将数据包装到每个屏幕 - 设备宽度上具有固定宽度的包装器中，因此您需要为标头和内容添加容器div将其添加到页脚div中。如果您使用的是bootstrap框架，则需要使用以下这些div的类作为以下代码：

<div class="site-container">
  <div class="header">
     <div class="container">
     </div>
  </div>
  <div class="content">
     <div class="container">
     </div>
  </div>
  <div class="footer">
  </div>
</div>

Answer 5

<style>
body{
  background:url(../image.jpg);
}
header {
    max-width:600px;
    width:100%;
    display:block;
    background:#ccc;
    height:250px; //header height no need to mention in your work
    border:1px solid #000;
    margin:auto;
}
#content {
    max-width:600px;
    width:100%;
    display:block;
    background:#ddd;
    height:500px; //content height no need to mention in your work
    border:1px solid #000;
    margin:auto;
}

footer {
    width:100%;
    height: 300px;
    left: 0;
    background:#000;
}
</style>       
<header>
           <div class="container">
              <div class="row">
                  <div class="col-lg-12">
                      // Header
                  </div>
              </div>
           </div>    
       </header>
       <section id="content">
           <div class="container">
              <div class="row">
                  <div class="col-lg-12">
                      // Content
                  </div>
              </div>
           </div>    
       </section>
       <footer>
           <div class="container-fluid">
              <div class="row">
                  <div class="col-lg-12">
                      // content here
                  </div>
              </div>
           </div>    
       </footer>

演示：https://jsfiddle.net/q4Lcjmsy/3/

Bootstrap页脚主要内容但全宽

5 个答案: