如何將我的側邊欄連接到我的頁腳？

我想將側邊欄連接到頁腳。我使用了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中默認的瀏覽器添加邊距和填充（這是推薦的，並且已經使用我的答案） –

如何將我的側邊欄連接到我的頁腳？

回答

相關問題