2

ここを見ると、右側にスクロールバーがあると、本来全身を埋めるはずの左側のサイドバーが下に隙間を作っていることが分かります。

**CSS**

html, body {
    height: 100%;    
    min-height: 100%;
}
.wrapper {
    width: 960px;
    margin: 0 auto;
    position: relative;
}
.sidebar {
    background: black;
    width: 260px;
    float: left;
    height: auto !important;
}
.wrapper, .sidebar {
    height: 100%;
    min-height: 100%;    
}

.content {
    float: left;
    margin-top: 15%;
    width: 700px;
}


footer {
    float: left;
    padding: 15px 0;
    width: 700px;
    text-align: center;    
}
​

**HTML** 

<div class="wrapper">
            <div class="sidebar">
                <nav> 
                    <ul>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                    </ul>
                </nav>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac ligula congue felis accumsan scelerisque sed eu risus. Nulla sed leo velit. Sed at commodo orci. Nam vitae varius risus. Vestibulum facilisis tortor aliquam orci rutrum vestibulum. Cras tincidunt pretium mauris non tristique. Vestibulum et justo tortor, at facilisis erat.</p>
                <footer>
                    <p>FOOTER</p>
                </footer>
            </div>
        </div>​

http://jsfiddle.net/5YHX7/567/

そして、何が起こるかのスクリーンショット

問題 黒はコンテンツの一番下までページを下っていきたいです。

100% の高さでも機能することに気付きましたが、ウィンドウをいっぱいにして、コンテンツをいっぱいにし続けないようです。

偽の列の手法を使用することもできますが、理想的にはこれを css で解決したいと考えており、jquery も使用できます。

乾杯

4

4 に答える 4

1

http://jsfiddle.net/5YHX7/578/この例を確認してください。サイドバーを固定し、いくつかの要素を右にフロートさせる必要があります。それが役に立てば幸い。

強調表示された css の変更:

 .sidebar {
  background: black;
  width: 260px;
  float: left;
  height: auto !important;
  position:fixed;
 }

 .content {
  float: right;
  margin-top: 15%;
  width: 700px;
 }


 footer {
  float: right;
  padding: 15px 0;
  width: 700px;
  text-align: center;    
}
于 2012-12-12T11:55:00.847 に答える
0

見つかった解決策はjqueryを使用することです

var contentHeight = $(".content").outerHeight();
    $(document).ready(function() {
        $(".sidebar").css('min-height', contentHeight);
    });

変数を使用してコンテンツの高さを取得し、この値を最小の高さとしてサイドバーに適用します。これにより、ビューポートが小さい場合やコンテンツが非常に長い場合は、コンテンツの最小の高さが適用されます。 。

于 2012-12-12T13:01:25.510 に答える
0

マージンを入れるだけです：0; 体の中で、あなたは終わりです。

html, body
        {
            height: 100%;
            margin:0;
        }

完全な例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
        html, body
        {
            height: 100%;
            margin:0;
        }
        .wrapper
        {
            width: 960px;
            margin: 0 auto;
            position: relative;
        }
        .sidebar
        {
            background: black;
            width: 260px;
            float: left;
        }
        .wrapper, .sidebar
        {
            height: 100%;
            min-height: 100%;
        }

        .content
        {
            float: left;
            margin-top: 15%;
            width: 700px;
        }


        footer
        {
            float: left;
            width: 700px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="sidebar">
            <nav> 
                    <ul>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                    </ul>
                </nav>
        </div>
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac ligula congue
                felis accumsan scelerisque sed eu risus. Nulla sed leo velit. Sed at commodo orci.
                Nam vitae varius risus. Vestibulum facilisis tortor aliquam orci rutrum vestibulum.
                Cras tincidunt pretium mauris non tristique. Vestibulum et justo tortor, at facilisis
                erat.</p>
            <footer>
                    <p>FOOTER</p>
                </footer>
        </div>
    </div>
</body>
</html>
于 2012-12-12T11:37:33.377 に答える