サイドバーが右に浮かびません

私は検索しました。私はもう試した。何もまだ動作しません。私は初心者ですが、問題なく前にdivをフローティングしています。フレックスボックスのスティッキーフッターとは何か？私は前にそれをしていない。私は、接続が表示されませんが、誰が知っている。必要なのはメインセクションとサイドバーだけです。私はそれほど難しくありません。前もって感謝します。ここに私のコードは次のとおりです。 HTML：サイドバーが右に浮かびません

<section>A technology services company supporting the solid rocket motor industry, airbag igniters, as well as Statistical Process Control support and training for manufacturing industries in general.</section> 

<aside class="sidebar">Content for class "sidebar" Goes Here</aside> 

<footer> 
    <div class="footer-wrapper">Content for class "footer" Goes Here</div> 
</footer> 

</div></body> 
</html> 


section { 
    display: block; 
    width: 65%; 
    float: left; 
    background-color:#999999; 
    padding: 20px; 
    font-size: 1.5em; 
    flex: 1 0 auto; 
} 
.sidebar{ 
    display: block; 
    background-color: #F9E903; 
    width: 25%; 
    height: auto; 
    padding: 0px; 
    float: right; 

} 
footer { 
    clear: both; 
    background-color: black; 
    font-size: 1.1em; 
    color: white; 
    padding: 15px 
}

出典

2016-07-08 Newsong80

してください。 – jmargolisvt

ここに私のコード全体があります。私はこれを正しいと思っています。私はまだサイドバーを右に浮かせることができません。 https://jsfiddle.net/newsong80/d5yevka0/#&togetherjs=jyu9v6y9Px – Newsong80

私は戻って、自分自身で新しいページに自分の「セクション、サイドバーとフッタ」を隔離しました。最終的にサイドバーは右に浮かんだ（メインセクションの横にはない）。私がラッパーdivに追加したとき、サイドバーはまったく浮動しませんでした。私はその後、ラッパーdivのコードのフレックスラインを取り出し、サイドバーは右側に移動しました（再び、メインセクションの横にはありません）。だからそれはフレックスオプションでなければならない。何かご意見は？私は本当に感動的な粘着性のフッターが好きです。 – Newsong80

それは問題はsection要素のパディングのあなたの20ピクセルがあなたの割合をいじりされていることである、その時点で私のために、モバイル、まで動作します。あなたは、余分なスペースの10％が間に存在していないですので、私もセクションに10％を追加しましたが、それが意図したなら、あなたは戻って65％にそれを減らすことができ、それを修正するために、この操作を行うことができます。

section{ 
    width: calc(75% - 40px); 
    padding: 40px; 
}

するたびに」何かにパーセンテージ幅を使用し、余白やパディングのピクセル値を持っている場合は、累積ピクセル値を幅から減算するためにcalcを使用してください。そうしないとスケーリングに問題が発生します。、HTML5の要素がすでに要素をブロックしているブロック：あなたが表示する必要はありませんボーダーボックスと2：

出典

2016-07-08 17:00:29 will

これは、どのボックスサイズ：border-boxが自然に行うか（およびいくつかのより特定のhtml）には過補償です。 –

body { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 

 
p { 
 
    padding: 1em; 
 
    } 
 

 
section { 
 
    width: 75%; 
 
    float: left; 
 
    background-color:#999999; 
 
    padding: 0; 
 
    font-size: 1.5em; 
 
} 
 
aside { 
 
    background-color: #F9E903; 
 
    width: 25%; 
 
    padding: 0px; 
 
    float: right; 
 
} 
 
footer { 
 
    clear: both; 
 
    background-color: black; 
 
    font-size: 1.1em; 
 
    color: white; 
 
    padding: 15px 
 
}

<html> 
 
    <body> 
 
<section> 
 
    <p>A technology services company supporting the solid rocket motor industry, airbag igniters, as well as Statistical Process Control support and training for manufacturing industries in general.</p></section> 
 

 
<aside class="sidebar"><p>Content for class "sidebar" Goes Here</p></aside> 
 

 
<footer> 
 
    <div class="footer-wrapper"><p>Content for class "footer" Goes Here</p></div> 
 
</footer> 
 

 
</body> 
 
</html>

こんにちは、あなたは1箱サイジングを必要としています。セクション内の段落にもパディングを適用していますが、パディングを直接追加すると、レイアウトの幅が乱され、動作しません。

出典

2016-07-08 17:04:14

あなたのパディング、マージン、ボーダーで上記の意志の要因は、あなたのブロックとインラインブロック要素のいずれかに追加

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box: -ms-box-sizing: border-box: box-sizing: border-box; }

以下のようにあなたがセクションに追加しているpadding: 20pxような（グローバルボックスのサイズ変更を追加）。

その後、脇からdisplay: block;を削除し、バイオリンを作るセクション（彼らは要素をブロックし、すでにある）

出典

2016-07-08 19:36:04 Omeiza

サイドバーが右に浮かびません

答えて

関連する問題