1

私はこれに何時間も苦労しており、これを機能させるために考えられる/見つけることができるすべてを試しました。ウェブサイトのコンテンツとサイドバーの div を固定フッターまで拡張したいと考えています。

関連CSS：

body, html {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;    
    min-height: 100%;
    height: 100%;
    line-height: 1;
    }

body { 
    min-height: 100%;
    height: 100%;
    font-family: 'Century Gothic', sans-serif;
    font-size: 13px;
    line-height: 21px;
    background: #e0d6b6 url(images/bg.png) repeat-x;
    color: #2f2f2f;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%; 
    }

.container {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    background: transparent;
    margin: 0 auto -30px;
    padding: 0px;
    }

.contentwrapper {
    position: relative;
    display: block;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 5%;
    }

#content,
#sidebar {
    position: relative;
    padding: 20px;
    background: #ffffff;
    min-height: 100% !important;
    height: 100% !important;
    display: block;
    position: relative;
    overflow: auto;
    }

#content {
    min-width: auto;
    width: auto;
    margin: 0 0 auto 0;
}

#sidebar {
    margin: 0 0 auto 2% !important;
    width: 150px;
    float: right;
    }

.footer, .push {
    clear: both;
    height: 30px;
    }

#footer {
    display: block;
    bottom: 0px;
    position: relative;
    width: 100%;
    margin: 0px;
    padding: 10px 0;
    font-size: 12px;    
    border: none;
    background: #808080;
    color: #c4c4c4;
    vertical-align: middle;
    }

関連するhtml:

<html>
<head>
</head>
<body>
<div class="container">
<div class="contentwrapper">
<div id="sidebar">sidebar</div>
<div id="content">    
content
</div><!--content-->
</div><!--contentwrapper-->
<div id="push"></div>
<div id="footer">
footer
</div> <!--footer-->
</div><!--container-->
</body>
</html>

生のコードを見たい場合、Web サイトはhttp://hoskyns50.co.ukです。既存の Wordpress レイアウトを適合させています。前もって感謝します。

4

1 に答える 1

0

を取り外しheight: auto !important;ます.contentwrapper

あなたが欲しいのheight: 100%;は あなたheight: auto !important;はあなたのをオーバーライドしていますheight: 100%;。

編集

フッターの問題を解決するには

#footerに位置を変更します。

position: fixed;

それ以外の

position: relative;

しかし、フッターがスクロールに追従しないため、これがあなたの望むものかどうかはわかりません。

フィドル: http://jsfiddle.net/xHJA4/

于 2013-07-08T15:24:05.097 に答える