1

私は（小さな）問題を抱えています。メニュー バーの背景色をメイン コンテンツの div と同じ高さにしようとしています。そのため、div の高さを 100% にしようと考えましたが、div の高さを高くするコンテンツが他にないため、うまくいかないようです。私の意味で（jsfiddleで作成された）例を作成しました。私は以前にこれをやったので、これが可能であることを知っています。ちょっと簡単な質問ですが、何かを少し忘れる日があります。

   <!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <div id="wrapper">
            <div id="boxLeft">
                menu1 </br>
                menu2 </br>
                menu3 </br>
            </div>  
            <div id="boxMid">
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
            </div>
            <div id="boxRight">
            </div>              
        </div> 
    </body>
</html>

</p> 

*{color:white;}
#wrapper{height:100% width:100%;}
#boxLeft{float:left; width:100px; height:100%; background-color:gray;}
#boxMid {float:left; width:400px; height:100%; background-color:blue; }
#boxRight{float:left; width:200px; height:50px; background-color:orange;}​

http://jsfiddle.net/zEest/56/

読んでくれてありがとう、

4

3 に答える 3

2

を見てみましょう：

等高柱

これがあなたを助けることを願っています。ちなみに、jquery を使用して高さを修正できます。dom の準備はできています。

$(document).ready(function(){ // event when DOM is ready.
  //sets the height of the boxes the same as the wrapper.
  $('#boxLeft, #boxRight').css('height',$('#wrapper').height());

});

ラッパーを正しい高さにするには、次を使用します。

<div id="wrapper">
        <div id="boxLeft">
            menu1 </br>
            menu2 </br>
            menu3 </br>
        </div>  
        <div id="boxMid">
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
        </div>
        <div id="boxRight">
        </div>
         <div style="clear:both;"></div>  
    </div>

cssのトリックをクリアすると、3つのラッパーの高さの両方が子供の最大の高さを取得します。

于 2012-12-17T13:15:04.197 に答える
1

追加するだけ

body {  height: 100%;}
#wrapper{overflow:auto;}

デモ

要素内のすべての#wrapper要素がフロートされるため、通常のフローから削除されます。#wrapper追加に高さを与えるために{overflow:auto;}

于 2012-12-17T12:59:21.607 に答える
1

これは、jQuery を使用して実現できます。シンプルな2ステップ

$(document).ready(function() {
   var midHeight = $('#boxMid').height();
   $('#boxLeft').height(midHeight);
});

ここにフィドルがあります

パーセンテージで与えwidthsてください..それらのdivが互いに隣接している必要がある場合。

乾杯 ：）

于 2012-12-17T13:02:39.897 に答える