0

テンプレートを 1 つ作成しました。トップ メニューをページの上部に配置し、ページの幅全体を取り、その後に

左側のメニューと中央にページ全体を表示したい

フッターにはトップメニューと同じ特徴があります

左メニューまたは中央のコンテンツが小さい場合: ページ全体が中央と左メニューで覆われ、スクロールバーがなく、下部にフッターがあります

これは私が試したことです：クリックしてください:)

   #page{
    background-color : black;    
}
#top-menu{
    background-color : yellow;
}
#left-menu{
    background-color : blue;
    float:left;
}
#center{
    background-color : red;
}
#footer{
    background-color : green;
}

前もって感謝します

4

2 に答える 2

0

ここで私の問題を解決するのはトリックです:このjqueryコードを追加します:

    <script src="jquery-1.9.1.min.js" ></script>
<script>
$(function(){
$('#left-menu').height($('#center').height());
});
</script>

私のhtmlコードの後：

    <div id="page" >
    <div id="top-menu" >
        content of top menu
    </div>
    <div id="left-menu" >
        content of left menu
    </div>
    <div id="center" >

<p>content of center</p><p>content of center</p><p>content of center</p><p>content of center</p><p>content of center</p>

 </div>
    <div id="footer" >
        content of footer
    </div>
</div>

そしてここにcssがあります：

    html, body, #page {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#top-menu{
    background: yellow;
    height: 6%;
}
#left-menu{
    background: blue;
    float:left;
    min-height: 90%;
    min-width: 15%;
}
#center{
    background: brown;
    min-height: 90%;

}
#footer{
    clear : both;
    height: 4%;
    background: green;
}
p{
margin : 0;
}

@bookcasey 助けてくれてありがとう ;)

于 2013-04-20T21:25:05.267 に答える