0

#sidebar私はこのコードを書きましたが、 ( )で 100% 動作しない理由がわかりませんdisplay: table-cell。

これは私のコードCSSです:

<head>
<style type="text/css">

body { margin: 0 auto; width: 800px; }

#wrapper{
    display: table;
    overflow: hidden; /* clearance */
}

#panel1, #panel2{
    display: table-cell;
    vertical-align: top;
    width:400px;
}

#panel1{ background-color: blue; }

#panel2{ background-color: grey; }



#sidebar, #content{ float:left; }

#sidebar{
    background-color: yellow;
    width: 100px;
    height: 100%;
}

</style>
</head>

そしてHTMLコード：

<body>

    <div id="wrapper"> 

        <div id="panel1"> 
            <div id="sidebar">menu</div>

            <div id="content">
                <br/><br/><br/><br/><br/><br/><br/><br/><br/>end
            </div>
        </div>

        <div id="panel2"><br/></div>

    </div>

</body>
4

2 に答える 2

1

私が理解していることから、サイドバーの高さをそれを含むdivの100％にする必要があります（この場合はpanel1です）

サイドバーが希望どおりに表示されないのは、メニューを保持している div の高さが設定されていないためです (コードでは、これは 'panel1' div になります)。

この問題を修正するには、コンテナ ('panel1') の高さを設定するだけで、サイドバーがそれに応じて調整されます。

CSS

#panel1 { 
     background-color: blue;
     height: 600px; /* You can set this height to whatever size you prefer */
     }

ここで実際の動作を確認できます

于 2013-04-09T15:35:39.690 に答える
0

同じ高さの列を作ろうとしているように見えますか? もしそうなら、ここを見てください：

http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/

これを達成する方法については、他にもいくつかの記事とコツがあります。単に「html/css の等高列」をグーグルで検索してください。

于 2013-04-09T15:31:53.037 に答える