CSS)
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}
.sidebar{
width: 5%;
display: inline;
height: 100%;
float: left;
background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
font-size: 0.5em;
position: absolute;
bottom: 0;
left: 0;
}
現在、私のレイアウトは次のようになっています:。
.
そして、次のようにしたい:。
重複の可能性あり]6で提示されているこのガイドに従ってみましたが、役に立ちませんでした。
これは、floats
とfluid layout
を使っているからだと思います。
どうすれば、fluid layout
とfloat
の位置関係を保ったまま、列を拡張することができますか?
あなたのコードを更新しました。Plunker]1でチェックしてみてください。
最初は、必要がなければ、「絶対座標」や「相対座標」を使わないようにしてみてください。
2つ目は、あなたの場合、display: inline
とfloat: left
のスタイルを与えることで、同じことをしていますので、後者だけを使えば十分です。
それに、私はHTML
とBODY
タグのheight
を100%にして、sidebar
とcontent
のDIV
にも同じことをしたので、これらは親
'の(body
の)高さを埋めることになります。
最後に、あなたの問題の一つは、background
プロパティのrepeat-y
値でした。これはx軸上で繰り返されないので、DIV
sの実際のサイズを見ることができませんでした。そこで、repeat-y
ではなく、repeat
に設定しました。
このようにしてみてください。
[フィドル][1]
<h1>Hello Plunker!</h1>
<div class="container">
<div class="sideBar">sideBar</div>
<div class="content">content</div>
</div>
*
{
margin:0;padding:0;
}
html,body,.container, .sideBar, .content
{
height: 100%;
}
h1
{
height: 50px;
line-height: 50px;
}
.container
{
margin-top: -50px;
padding-top: 50px;
box-sizing: border-box;
}
.sideBar
{
float:left;
width: 100px;
background: aqua;
}
.content
{
overflow:hidden;
background: yellow;
}