フルハイトのサイドバーとフルハイトのコンテンツ、フルードレイアウト

重複する可能性がありますが、参考になりませんでした.

このトピックについて多くの回答があるのは知っていますが、どちらも私を助けてくれず、この問題に何日も費やしました。 この問題に何日も費やしました。 この問題に何日も費やしてしまいました。回答や本の90％は、このような背景のトリックを紹介していますが、私には役に立ちませんでした。

私のコード - Plunker.

HTMLとは？

<body >
<h1>Hello Plunker!</h1>

<div class="sidebar">
  <ul>
        <li><a href="#">ANALYTICS</a></li>
        <li><a href="#">STYLES</a></li>
        <li><a href="#">VOTERS</a></li>
        <li><a href="#">GET STARTED</a></li>
        <li><a href="#">UPDATE</a></li>
  </ul>
</div>
<div class="content">
  <p>Content</p>
</div>

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の位置関係を保ったまま、列を拡張することができますか？

Community
編集された質問 23日 5月 2017 в 12:02
プログラミング
css3 css css-float
21日 8月 2013 в 9:42
290 ビュー
ソリューション

あなたのコードを更新しました。Plunker]1でチェックしてみてください。

最初は、必要がなければ、「絶対座標」や「相対座標」を使わないようにしてみてください。

2つ目は、あなたの場合、display: inlineとfloat: leftのスタイルを与えることで、同じことをしていますので、後者だけを使えば十分です。

それに、私はHTMLとBODYタグのheightを100%にして、sidebarとcontentのDIVにも同じことをしたので、これらは親'の（bodyの）高さを埋めることになります。

最後に、あなたの問題の一つは、backgroundプロパティのrepeat-y値でした。これはx軸上で繰り返されないので、DIVsの実際のサイズを見ることができませんでした。そこで、repeat-yではなく、repeatに設定しました。

Karlen Kishmiryan
編集した答え 12日 12月 2014 в 6:32
解説 (2)

このようにしてみてください。

[フィドル][1]

マークアップです。

<h1>Hello Plunker!</h1>
<div class="container">       
    <div class="sideBar">sideBar</div>
    <div class="content">content</div>
</div>

CSS

*
{
    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;   
}
Danield
編集した答え 21日 8月 2013 в 9:59
解説 (1)

ちょっと古い質問ですが、Zurbの皆さんが素敵なソリューションを用意してくれています。

http://foundation.zurb.com/apps/

解説 (0)