サイドバーをフッタに接続するにはどうすればよいですか？

サイドバーをフッターに接続します。私は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

を助け期待された結果、その後

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")

希望を取得します* * "フッターにサイドバーを接続する" を明確にしてください。レイアウトはどのように見えるのですか？多分簡単なイメージを作り、それをあなたの質問に加えてください。 –

あなたのコードにmargin-top：-114pxを削除してみましたか？ – vikrantnegi007

Fred Gandt、apdated –

//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や本文から余白やパディングを削除することを検討してください。

あなたは可能性が高く、これが

出典

2017-07-03 19:17:26

編集しましたが、何も変更されていません（ –

@z_u_lまず、:: beforeと:: afterに2つのコロンがあります。そのようにするなら、ボックスのサイズ変更によって高さ/幅が変更されます：http：// callmenick .com/post/box-sizing-reset-border-box。また、デフォルトのブラウザで追加されたマージンとhtmlとbodyでのパディングは削除されていません（推奨されています。私の答え） –

サイドバーをフッタに接続するにはどうすればよいですか？

答えて

関連する問題