2

お待ち頂きまして、ありがとうございます。たとえば、高さと最小高さが 100% の左メニューを作成する必要があります。

ウェブサイトに多くのコンテンツがない場合、左のメニューは一番下に移動する必要があります ウェブサイトに多くのコンテンツがある場合、左のメニューも一番下に移動する必要がありますが、スクロールバーが...

左右の div は常に 100% でな​​ければなりません

画像例 http://www.diegomenezes.com/stack.jpg

HTML5を使用できます

ここでは、JSFiddle リンク http://jsfiddle.net/6gSYn/を確認できます。

そしてここに私のコードです！

    <div id="container">
    <div id="top"><h1>TESTE</h1></div>
    <div id="content">
        <div id="left">
        <ul class="lista">
            <li>ITEM 1</li>
            <li>ITEM 1</li>
            <li>ITEM 1</li>                
            <li>ITEM 1</li>
            <li>ITEM 1</li>
            <li>ITEM 1</li>
            <li>ITEM 1</li>
            <li>ITEM 1</li>
        </ul>
        </div>
        <div id="right">
        <p>TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE </p>        

            <div id="footer">
            <p>TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE </p>
            </div>
    </div>
    </div>    

</div>

ここでCSS

@charset "utf-8";
/* CSS Document */

* {
margin: 0px;
padding: 0px;
}
html {
    height: 100%;
}

body {
background: darkgrey;
height: 100%;

}

#container {    
height: 100%;
position: relative;
}

#top {
height: 100px;
width: 100%;
background-color: black;
color: white;
float:left;
}

#content {
background: darkgrey;
width:100%;
min-height: 100%;
height:100%;
}

#content ul.lista {
width: 250px;
display: inline-block;
vertical-align: top;
background: lightgrey;
color: red;
bottom: 0;
}


#right {
width: 1000px;
color: blue;
display: inline-block;
padding: 10px;
min-height: 400px;
}


#footer {
color: black;
height: 50px;
text-align: center;
width: 100%;
}
4

3 に答える 3

0

cssこの問題の純粋な解決策はないと思います。理解して実装するのが簡単ではない目盛りがいくつかあるかもしれません。むしろ、ほとんどの JavaScript または正確には jQuery を使用して問題を解決できます。

次のようにコードブロックを仮定しましょう-

<div id="mainContainer">
    <div id="leftContainer">
        <p>Some contents which you want to put in the left blovk</p>
    </div>
    <div id="rightContainer">
        <p>Some contents which you want to put in the right blovk</p>
    </div>
</div>

これら2つのdivを作成leftContainerしrightContainer、同じ幅を持つには、いくつか追加する必要がありますjs-

$(document).ready(function(){
// making the height of the right container same as the left one

    leftContainerHeight = $('#leftContainer').outerHeight();
    $('#rightContainer').height(leftContainerHeight);

//or

// making the height of the right container same as the left one

    rightContainerHeight = $('#leftContainer').outerHeight();
    $('#leftContainer').height(rightContainerHeight);

});

これjsにより、関心のあるコンテナーの高さが動的に設定されます。ただし、1 つのフォールバックは、dom が非常に重い場合、または訪問者の接続が遅い場合、高さのジャンプが発生することです。つまり、ページの読み込みが完了するとすぐに、依存コンテナーの高さが急激に増加することがわかります。これを回避するには、読み込み中の gif 画像または単にfadeInコンテンツの効果を使用できます。フェードイン効果の詳細については、こちらをご覧ください

これがフィドルです。

http://jsfiddle.net/6gSYn/9/

ここでさらにサポートが必要な場合は、お気軽にお問い合わせください。

ありがとう。

于 2013-04-22T18:25:02.893 に答える
0

これを試して、うまくいったかどうかを教えてくださいjsfiddle
CSS: 

#right {
    overflow-y: scroll;
}

td {
    vertical-align:top;
}
于 2013-04-22T14:21:58.100 に答える
0

height:100% がすべてのブラウザーで適切に機能するには、親要素の高さをピクセルの高さに指定する必要があります。コンテンツが指定された高さよりも多くのスペースを必要とする場合があるため、これは複雑です。JavaScript を使用してこの問題を回避することもできますが、それが常に最善の解決策であるとは限りません。

于 2013-04-22T19:40:49.350 に答える