Question

我想将侧边栏连接到页脚。我使用html,body {position:relative; height:100%;}但它在我的代码中不起作用。我的错是什么？ height: 100vh看起来很奇怪。我怎么办？

我想要这个：

What I want

我的代码：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style type="text/css">
    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 0;
      font: 16px Arial, Helvetica, sans-serif; 
      background: #e1dfb9; 
    }

    ul, li {
      margin: 0;
      padding: 0;
    }

    .col-sm-3, .col-sm-9 {
      position: relative;
      float: left;
    }

    .col-sm-3  { width: 26%; }
    .col-sm-9  { width: 74%; }

    .col-pad { padding-right: 10px; }


    .container {
      min-width: 960px; 
      max-width: 1920px;
      margin: 0 auto;
      background: #f0f0f0; 
    }

    .sidebar_wrap {
      background-color: gray;
      padding: 34px 16px;
      height: 100%;
    }

    html,body {
      height: 100%; 
      position: relative;
    }
    .main { 
      min-height: 100%; 
      height: 100%;
    }
    .hFooter { 
      height: 114px; 
    }
    .footer { 
      background: gray; 
      color: #fff;
      height: 114px; 
      margin-top: -114px; 
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="container">
      <div class="col-sm-3 col-pad">
        <div class="sidebar_wrap">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi, inventore, quisquam, laboriosam veniam recusandae repellat quo animi fugiat nulla debitis. Eos magni, excepturi eveniet! Molestias quasi consequatur quo tenetur sequi, a quia! Iusto autem accusamus quo officia explicabo eaque doloremque nesciunt! Facilis repellendus culpa, eum reiciendis nesciunt quisquam facere iusto, ipsa harum ab deleniti officia libero totam reprehenderit illo expedita voluptatum consequuntur repudiandae recusandae dolor commodi quas. Omnis voluptas, iusto ipsum, quo eaque dignissimos sunt assumenda! Sequi labore libero expedita asperiores iusto consequuntur repellendus facilis ratione, possimus, in, a aliquid. Doloribus error animi excepturi dolorum, dolorem odit velit voluptatibus.</p>
        </div>
      </div>

      <div class="col-sm-9">
        <div id="ext">
          <div id="int"></div>
        </div>
      </div>
    </div>

    <div class="hFooter"></div>
  </div>


<div class="container">
  <div class="footer">Lorem ipsum dolor.</div>
</div>


</body>
</html>

＆＃13;

Answer 1

您应该考虑使用css中的星号(*) "select all" selector从所有元素中删除浏览器添加的边距和填充，或者只删除CSS顶部的html和body的边距和填充。

您更有可能获得预期的结果

  html, body{
     margin:0;
     padding:0;
   }
/*removes margin/padding from html and body at top of css
   then continue with other css*/

或

* { 
   margin: 0;
   padding:0;
}

/*if you use this option [put at top of css], any margins/padding will be 
 removed from all elements, but any following css that adds margin/padding 
 will be accounted for (so you can stll have margins etc.. it's not 
 completely "wipe-all")

希望这有帮助

如何将侧边栏连接到页脚？

1 个答案: