1

私は合計4つのdivを持っています:

1 つのコンテナ 1 つのサブメニュー 1 つのコンテンツ 1 つのサイドバー

それらは次のように設定されています。

<container>
     <submenu></submenu>
     <content></content>
     <sidebar></sidebar>
</container>

コンテナには position:relative と overflow:hidden があります

サブメニューとコンテンツには float:left があり、配置に使用されるマージンがあります

サイドバーは絶対に右側に配置されます (サブバーがレイアウトに影響するため、float は機能しません。

サイドバー内に垂直にリストされている画像がありますが、コンテナによって切り取られています。フロートするか、位置を相対に設定すると、サイドバーが適切に含まれます。サイドバーの後に明確な修正を試みましたが、うまくいきません。

これは、私が常に問題を抱えている問題の 1 つです。助言がありますか？

- - -編集 - - - 

<div id="content">
    <div id="submenu">
    </div>
    <div id="contentBox">   
    </div>
    <div id="sidebar">
    </div>
</div>

#content
{
    margin: -22px auto 0 auto;
    overflow: hidden;
    padding: 0 10px 10px 10px;
    position: relative;
    text-align: left;
    width: 961px;
}

#submenu
{
    background-color: #001a28;
    border: 5px #008da8 solid;
    float: left;
    margin: -20px 0 0 -10px;
    padding-top: 20px;
    width: 700px;
}

#contentBox 
{
    background-color: #ffffff;
    float: left;
    margin: 10px 0 10px -10px;
    width: 710px;
}

#sidebar
{
    border-left: 5px #008da8 solid;
    border-right: 5px #008da8 solid;
    background-color: #ffffff;
    display: block;
    height: 100%;
    position: relative;
    float: right;
    text-align: center;
    right: 10px;
    top: -10px;
    width: 207px;   
}
4

1 に答える 1

0

div を親要素の高さの 100% にする簡単な方法が見つかりませんでした。<sidebar> を 100% の高さに伸ばす代わりに、<container> で縦方向の背景ストレッチを使用して、サイドバーがある場所にストライプを作成し、<サイドバー> bg-transparent. そうすれば、<sidebar> の高さに関係なく、常に <container> の高さの 100% であるという錯覚が生じます。

それができたら、説明したように画像がトリミングされていないことを確認してください。同じ効果になるはずです。ただし、何を達成しようとしているのかを詳しく知らずに、これが役立つかどうかはわかりません。お役に立てれば！

于 2010-11-29T22:09:18.963 に答える