1

流動的な幅の順序付けられていないリスト (幅: 30%) を含む流動的な幅の div (幅: 100%) と、その右側に配置されたコンテンツの流動的な幅のブロック (幅: 70%) があります。コンテンツのブロックが順序付けられていないリストの高さを超えているため、各リスト項目の高さを増やしてコンテナの高さを埋めたいと思います。明らかに、25% の高さは機能しませんが、それが私が探しているものです。私は立ち往生しています。助言がありますか？

<div id="container">
    <ul id="tabs">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <div id="content">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>
4

3 に答える 3

0

次のように、順序付けされていないリスト (幅: 30%) に静的な背景を追加して、これを試すことができます。

#your_tab_id_here:before {
  content: "";
  display: block;
  width:30%;
  position: fixed;
  bottom: 0;
  top: 0;
  z-index: -9999;
  background-color: #cccccc; // same with the background of your tabs

}

また、フッターについては、この種のアプローチを使用して、下部に粘着性を持たせてみてください:) 希望、これでアイデアが得られます..

ここで私のJSFiddleを参照してください

于 2013-10-09T01:08:04.640 に答える
0

HTML に追加のコンテナーを追加する場合は、次のようにします。

<div id="container">
    <div id="tabs-wrapper">
        <ul id="tabs">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

display: table;次に、との魔法を使用してdisplay: table-row;、li 要素のサイズを純粋な css に合わせて調整できます。

tabs-wrapper 要素の周りで使用position: absolute;し、各辺の範囲を必要な場所に宣言する 'stretch' メソッドを使用して、メイン コンテナーの高さを埋めるようにしました。

#container {
    position: relative;
}
#tabs-wrapper, #content {
    display: inline-block;
}
#tabs-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 70%;
    bottom: 0;
}
#tabs {
    display: table;
    height: 100%;
    width: 100%;
}
#tabs li {
    display: table-row;
}
#content {
    width: 70%;
    margin-left: 30%;
}

私はこれをかなり迅速に行ったので、もう少し効率的に行うことができると確信しています。よく遊んでみれば、余分なコンテナ要素を取り除くことさえできるかもしれません。

フィドルは次のとおりです。

http://jsfiddle.net/Dx4L8/

于 2013-10-09T01:30:03.800 に答える
0

jQuery の場合:

var adjustHeight;

$(document).ready(function() {
    var $tabs = $('#tabs');
    var $content = $('#content');

    adjustHeight = function() {
        var tabsH = $tabs.height();
        var contentH = $content.height();
        if(contentH > tabsH) {
            $tabs.height(contentH); //set height if greater than tabs
        } else {
            $content.attr('height', ''); //remove height if one has been set
        }
    }

    adjustHeight();

    // If the #content height changes, you need to rerun adjustHeight()
});

このコードは、ページが最初に読み込まれたときに実行されます。ページの読み込み後に高さが変更された場合#content(たとえば、コンテンツが ajax を介して変更された場合)、実行するコールバックを設定する必要がありますadjustHeight()。

于 2013-10-09T01:16:09.170 に答える