4

いくつかの問題を管理する方法について簡単なヒントが必要です。ナビバーを作成して中央に配置したので、画面の大きさに関係なくページの中央に表示されますが、そのバーをページの下部にとどめるにはどうすればよいですか? を追加すると、そのバーが一番下に押し出されることはわかってheightい.MainContainerますが、一定の高さに依存しないようにしたいと考えています。アドバイスありがとうございます！

HTML

<html>
<head>
</head>  
<body>
    <div class="MainContainer">
    </div>  
    <div id="MenuContainer">
        <ul id="navigation">
            <li class="x"><a title="1" href="indexX-1.html" >1</a></li>
            <li class="x"><a title="2" href="#" >2</a></li>
            <li class="x"><a title="3" href="#" >3</a></li>
            <li class="x"><a title="4" href="#" >4</a></li>
            <li class="x"><a title="5" href="#" >5</a></li>
            <li class="contact" class="last"><a title="6" href="#" >6</a></li>
        </ul>
    </div> 
</body>
</html>

CSS

.MainContainer {
    width: 1200px;
    background-color: #0066CC;
}
.MenuContainer {
    height: 70px;
    bottom:0;
}
ul#navigation {
    height: 70px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    border-width: 1px 0;    
    text-align: center;
    font-size: 22px;
    font-family: 'Cham-WebFont', Arial, sans-serif;
    background-color: #FFF;
}
ul#navigation li {
    display: inline;
    margin-right: .75em;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul#navigation li.last {
    margin-right: 0;
}
4

2 に答える 2

4

ナビゲーションに固定配置を作成htmlして適用することにより。body height:100%

html, body {
 height: 100%;
}

ul#navigation {
 position: fixed;
 bottom: 0;
 width: 100%;
}

ここに jsFiddle があります: http://jsfiddle.net/nqKpe/1/
ウィンドウのサイズを自由に変更して、ナビゲーションが常に下部にあることを確認してください。

于 2013-03-29T07:57:40.507 に答える
0

これはあなたのために働くJSFIDDLEです

タイプミスがあります：

.MenuContainer {
    height: 70px;
    bottom:0;
}

次のようにする必要があります。

#MenuContainer {
        height: 70px;
        bottom:0;
    }

あなたのHTMLに従って。また追加position:fixed;：

 #MenuContainer {
            height: 70px;
            bottom:0;
            position:fixed;
        }
于 2013-03-29T08:02:03.663 に答える