1

div私は2つの子供を含むコンテナを持っていますdivs.1つ目は父親の左の境界線に固執し、ボタンのリストを含み、2つ目はコンテンツを含みます. 簡単に言うと、ボタンが左側にあるタブ ナビゲーターのように機能します。

私が抱えている問題は、ボタンのコンテナーの高さです。それは、彼の親の 100% にしたいということdivです。コンテンツの高さに応じてコンテナーを変更したいので、コンテナー div に固定の高さを与えたくありません。

下のフィドルでわかるように、ul右の境界線がコンテナーの下端に触れていません。

ここにいくつかのコードがあります

HTML

<div id="container">
    <div id="buttons">
        <ul>
            <li><a href="#">button 1</a></li>
            <li><a href="#">button 2</a></li>
            <li><a href="#">button 3</a></li>
            <li><a href="#">button 4</a></li>
        </ul>
    </div>
    <div id="content">
        asdasdasdasdas<br>
        ...
        asdasdasdasdas<br>                       
    </div>
</div>

CSS

#buttons{
    background: lightgray;
    width: 150px;
    float: left;
    border-right: 1px solid black;
    height: 100%
}
#content{
    padding: 15px;
    float: left;
}
#container{
    /*-- adding fixed height here, works*/
    /*height: 300px;*/
    display: inline-block;
    border-left: 1px solid black;
}

フィドル

この問題のアイデアや解決策はありますか?

よろしくお願いします。

4

2 に答える 2

3

これを行うには、#buttons div を親内に絶対配置します。

このために、最初に親で相対位置を宣言します

#container {
    position:relative;
    min-height:200px;/* if you can reliably set a minimum height */
}

#buttons {
    position:absolute;
    height:100%;
    width:150px;
}

#content {
    margin-left:150px;
}

絶対配置されたボタン要素がページ フローの外にあるため、#buttons div の幅に等しいマージンを #content div に追加して、適切な場所に配置することができます。

更新されたフィドルを参照してください。

http://jsfiddle.net/kVcds/3/

于 2013-07-22T13:27:08.817 に答える