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

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

我想这一点：

What I want

我的代码：

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

来源

2017-07-03 z_u_l

请澄清* “侧边栏连接到页脚” *。布局应该是什么样子？也许做一个简单的图像，并将其添加到您的问题。 –

您是否尝试为您的代码移除margin-top：-114px？ – vikrantnegi007

弗雷德甘特，apadated –

//sidebar changes 
padding-bottom:58% 
float:left 

//footer changes 
float:left 
width:100%

来源

2017-07-03 18:50:51

我认为填充非常成功的决定，因为如果我们有更多的文本。我们将收到https://i.stack.imgur.com/uq1rA.png –

嗨z_u_l，如果这对你有所帮助，请将其标记为有用。干杯！ –

您应该考虑从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")

希望这有助于

来源

2017-07-03 19:17:26

编辑，但没有任何改变（ –

@z_u_l首先，如果你打算这样做，则:: :: before和:: after后面有2个冒号，而且box size会改变高度/宽度：请参阅http：// callmenick .com/post/box-sizing-reset-border-box。另外，你还没有去除html和body中默认的浏览器添加边距和填充（这是推荐的，并且已经使用我的答案） –

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

回答

相关问题