35

私はこれを理解することはできません。ヘッダー、サイドバー、コンテンツ領域を備えた単純なdivのセットがあります。ヘッダーは全幅で、側面とコンテンツは左に浮かんでいます。

ページの高さの100％を埋めるために（背景用の）サイドバーが必要ですが、クロムで要素を検査すると、<body>実際にはページの下部よりずっと前に終了しているため、サイドバーの高さが制限されているようです。

<body>ここでページ全体を埋めることを妨げているのは何ですか？

    ​&lt;body>
    <div id="head">
    </div>
<div id="sidebar">
    <div>
        <div id="menu">
            <ul>
                <li><a href="/dashboard.php"><img src="/img/blank.png" alt="home" id="home_ico">Home</a>
                </li>
                <li class="admin"><a><img src="/img/blank.png" alt="home" id="users_ico">Users</a>
                    <ul class="submenu" style="display: none;">
                        <li><a href="/users">Manage users</a></li>
                        <li><a href="/users/add.php">Add a user</a></li>
                    </ul>
                </li>

                <li class=""><a><img src="/img/blank.png" alt="home" id="clients_ico">Clients</a>
                    <ul class="submenu" style="display: none;">
                        <li><a href="/client_orgs">Manage clients</a></li>
                        <li><a href="/client_orgs/add.php" class="admin">Add a client</a></li>
                    </ul>
                </li>


                <li class=""><a><img src="/img/blank.png" alt="home" id="projects_ico">Projects</a>
                    <ul class="submenu" style="display: none;">
                        <li><a href="/projects">Manage projects</a></li>
                        <li><a href="/projects/add.php" class="admin">Create a project</a></li>
                        <li></li>
                        <li><a href="/projects/submitted.php" class="admin client">Submitted projects</a></li>
                        <li><a href="/projects/closed.php" class="admin">Closed projects</a></li>
                    </ul>
                </li>
                <li class=""><a href="/my_account"><img src="/img/blank.png" alt="home" id="account_ico">Account</a>
                </li>
                <li class="active"><a href="/help.php"><img src="/img/blank.png" alt="help" id="help_ico">Help</a>
                </li>
            </ul>

        </div>
    </div>
</div>    
<div id="body" class="full">
  <div id="content">

    <!--start block-->
    <div class="block">
        <h1><img src="/img/blank.png" alt="home" id="help_ico"> Help</h1>
        <p>
        Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.
        </p>
    </div>  
</div>   
</body>

CSS：

* {
    margin:0;
    padding:0;
}
html, body {
    height:100%;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 160%;
    position: relative;
    background: #000;
}
#sidebar{
    width: 200px;
    background: #000;
    height: 100%;
    padding-top: 30px;
    -webkit-box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5);
        box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5);
     float: left;
}
#body{
    float: left;
    padding: 30px 0 30px 40px;
    width: 75%;
}
4

7 に答える 7

9

追加してみてください

body {
  min-height: 100%;
}
于 2012-11-11T00:48:55.727 に答える
3

コンテナの高さ全体にわたるレイアウトを実現しようとしているようです - これらのレイアウトは不可能です。この問題の一般的な回避策であるFaux Columns CSS テクニックを読む必要があります。

于 2012-11-11T01:12:58.130 に答える
2

2 つの問題があります。

まず:
要素の幅がページの幅の 100% を超えています。これが、 div id="body"がサイドバーの下でスタックしている
理由です。

ボディの幅を 30% 程度にしてみてください。私の言いたいことがわかるはずです。

2 番目:
height:100%は、回避策があると思われる方法では実際には機能しません。
ここに素晴らしい解決策があります

于 2012-11-11T00:57:53.150 に答える