コンテンツに垂直バーをラップする

コンテンツと垂直バーをラップしようとしています。今、ビューポートがコンテンツを増やし、バーが互いに離れるように移動すると（バーは右に、コンテンツは左に）しかし、私はそれらを特定の量に分けてそのようにしておきたいと思います。これは私のスクリーンデザインです： enter image description here コンテンツに垂直バーをラップする

そして、それが今の私のコードのようになります。私のCSS http://codepen.io/Blackcan/pen/AXovrL

<!DOCTYPE HTML> 
<body> 
    <div id="wrapper"> 
     <div id="header"> 
     </div> 

     <div id="navhm"> 
     </div> 

     <div id="space"> 
     </div> 
     <div id="wrapperres"> 
     <div id="pfosten"> 
     </div> 

     <div id="contwrap"> 
     <div id="content"> 
     <p>Lorem Ipsum</p> 
     </div> 
     </div> 
     </div> 
     <div id="footer"> 
     </div> 
    </div> 
</body>

そしてthatsの任意のアドバイスは大歓迎です！

出典

2016-07-06 Marcel Schulz

私はこれにフレックスボックスを使用します。

のは、あなたのHTMLは次のようになりましょう：

<div class="container"> 
     <div class="content-left"> 
      <div class="nav-fixed"> 
      </div> 
      <div class="content"> 
      </div> 
     </div> 
     <div class="social-media"> 
     </div> 
    </div>

次に、あなたがあなたのCSSで使用することもできます

.container { 
     display: flex; 
     flex-direction: row; 
     justify-content: space-around; 
    } 

    .content-left { 
     flex: 0 0 60vw; 
     overflow-y: scroll; 

     display: flex; 
     flex-direction: column; 
     justify-content: space-around; 
    } 
    .social-media { 
     flex: 0 0 20vw; 
    } 

    .nav-fixed { 
     flex: 0 0 40px; 
    } 
    .content { 
     flex: 0 0 300px; 
    }

Codepen：フレキシボックスについてhttps://codepen.io/J-DD/pen/QErjLE

より：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://thenewcode.com/780/A-Designers-Guide-To-Flexbox

出典

2016-07-06 14:45:28

私はそれが私が望んでいたようにかなり良いようです。しかし、ボックスは "スケール"を私は右が表示されますか？木のテクスチャを使用する際に問題になる幅の変更のように –

可能です。ボックスの幅は 'flex：0 0 20vw'で設定されます。 20vwはビューポートの幅を表します。そのため、ブラウザが拡大縮小すると、ボックスは拡大縮小されます。固定値を設定することもできます。ちょうど20vwを編集してください。例： 'flex：0 0 30px'。スケーリングを無効にするには、 '.content-left'と' .social-media'を変更する必要があります。 –

ああ、私は参照してください！私はその1つを使用する多くのありがとう！ありがとうございました:) –

コンテンツに垂直バーをラップする

答えて

関連する問題