CSS：特殊な流体レイアウトの問題

添付の画像を参照してください。これはどのように達成されますか？まあ、私は8年間CSSを行ってきましたが、どういうわけかこれを行う必要はありませんでした！

ありがとうございます！

2010-12-14 Allen Gingrich

あなたが大規模のdivのためのパーセンテージを使用していますか？ – DeaconDesperado

これは私がそれを行う方法です。

<style> 
    #container { margin-left: 250px; } 
    #sidebar { 
    display: inline; /* Fixes IE double-margin bug. */ 
    float: left; 
    margin-left: -250px; 
    width: 250px; 
    } 

    /* Definitions for example only: */ 
    #sidebar { background: #FF0000; } 
    #content { background: #EEEEEE; } 
    #sidebar, #content { height: 300px; } 
</style> 

<div id="container"> 
    <div id="sidebar"></div> 
    <div id="content"></div> 
</div>

Example here

出典

2010-12-14 23:21:43 simshaun

私はこれを自分のサイトで実装していましたが、コードは失われました。ここでは簡単CSSのモックアップだ：

HTML：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>Test</title> 
    </head> 

    <body> 
     <div id="left"> 
      Mr. Fixed-width left 
     </div> 

     <div id="right"> 
      Mr. Dynamic right. Scroll me! 
     </div> 
    </body> 
</html>

そして、ここでは、CSSです：

body 
{ 
    padding-left: 230px; 
} 

#left 
{ 
    position: fixed; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    width: 200px; 

    background-color: rgb(150, 150, 150); 
    border-right: 5px solid rgb(50, 50, 50); 

    padding: 10px; 
} 

#right 
{  
    width: 100%; 
    height: 10000px; 
}

これは動作し、ここでのライブコピーでなければならない：http://jsfiddle.net/dDZvR/12/。

左のバーにパディング、ボーダー、余白などを追加するときは、必ずボディのパディングを増やす必要があります。）デバッグのトンを節約します;）

幸運！

出典

2010-12-14 23:21:16 Blender

フィードバックがありますか？それは動作しますか？ *一口* – Blender

はい、私はこの解決策が好きです。 –

この新しいアプローチは、コンテンツ・ボックスとしてレイアウトを破壊しない（右）有機的に成長します。また、コンテナボックスに背景や枠線を安全に適用することもできます。

.container { 
    width: 100%; 
    height: 100px; 
    overflow: hidden; 
    position: relative; 
} 

.left { 
    position: absolute; 
    width: 80px; 
    height: 100%; 
} 

.right { 
    position: relative; 
    left: 80px; 
    top: 0; 
    margin-right: 100px; 
    height: 100%; 
}

See demo。

出典

2015-02-18 00:46:46 Oriol

You can always use table display layouts (sigh)。

.container { 
 
    width: 100%; 
 
    display: table; 
 
} 
 
.container div { 
 
    display: table-cell; 
 
} 
 
.sidebar { 
 
    width: 200px; 
 
    background: gray; 
 
}

<div class="container"> 
 
    <div class="sidebar">fixed width sidebar</div> 
 
    <div>dynamic content</div> 
 
</div>

出典

2015-02-18 01:36:42

これは私が考えることができる最も単純なソリューションです。

親要素のdivを相対位置に設定してラップし、静的なサイドバーを絶対配置し、レスポンスディビジョンの余白を静的なサイドバーと同じ幅に設定します。

HTML：

<div class="wrapper"> 

     <div class="fixed"></div> 

     <div class="responsive">xx</div> 

    </div>

CSS：

.wrapper { 

    width: 100%; 

    } 

    .fixed { 

    position: absolute; 
    bottom: 0; 
    left: 0; 
    top: 0; 


    } 

    .responsive { 

    margin-left: 250px; 

    }

出典

2015-02-18 01:48:54

CSS：特殊な流体レイアウトの問題

答えて

関連する問題