2

と呼ばれるcontentdivがあり、そのdiv内に。と呼ばれるdivがありますsidebar。contentサイドバーをdivの一番下まで伸ばしたいのですが、そうではありません。関連するマークアップとCSSは次のとおりです。

<div id="content">
    <div id="sidebar">
        <ul>
            <li><a href="/register">Register</a></li>
            <li><a href="/login">Login</a></li>
            <li><a href="/forgotpass">Forgotten password</a></li>
        </ul>
    </div>
    <form action="login" method="post" id="main-form">
        <p class="p-username">
            <label for="username">Username</label>
            <?php echo form_error('username'); ?>
            <input original-title="Alphanumeric characters, underscores and dashes" type="text" name="username" value="<?php echo set_value('username') ?>">
        </p>
        <p class="p-password">
            <label for="password">Password</label>
            <?php if(isset($error)): ?>
                <span class="error"><?php echo $error ?></span>
            <?php else: ?>
                <?php echo form_error('password'); ?>
            <?php endif; ?>
            <input original-title="Please choose a strong password" type="password" name="password">
        </p>
        <p>
            <input type="submit" class="primary-button" value="Log in">
        </p>
    </form>
    <div class="clear"></div>
</div>

CSS：

#content {
    width: 960px;
    border: 1px solid #e7e7e7;
    margin-top: 10px;
    border-radius: 5px;
}

#sidebar {
    width: 250px;
    background: #f5f8fa;
    float: left;
    height: 100%;
    border-right: 1px solid #e0eefb;
    box-shadow: inset -5px 0px 4px -2px #e8f1f9;
    margin-right: 10px;
}

#sidebar ul {
    margin:; 0;
    padding: 0;
    list-style-type: none;
}

#sidebar ul li {
    line-height: 40px;
}

#sidebar ul li a {
    display: block;
    width: inherit;
    padding-left: 20px;
    text-decoration: none;
    font-size: 16px;
}

そしてjsFiddleリンク：http ：//jsfiddle.net/QXfH3/

ご覧のとおり、サイドバーは最後のリスト項目の後で停止します。contentdivの一番下まで伸ばしてほしい。追加height: 100%することでうまくいくと思いましたが、どうやらそうではないようです。height: inherit同様に何もしません。

ありがとう。

4

4 に答える 4

0

あなたが探しているのは、固定流体レイアウトです。残念ながら、絶対的な高さを指定しない純粋なCSSでは、物事が少し難しい場合があるため、<table>おそらくaが最善の策です。それ以外の場合は、こちらをご覧ください...

固定流体レイアウトを示すフィドル

于 2012-06-20T19:44:21.213 に答える
0

コンテナdivに高さを割り当てる必要があります。この場合は#contentです。高さが100％でない場合は意味がありません。 http://jsfiddle.net/fS8TB/1/

于 2012-06-20T19:37:11.340 に答える
0

これを実現する方法は、 for の背景画像を設定すること#contentです#sidebar:

#content {
    background: url(data:image/png;base64,[BASE64-DATA]) repeat-y; /* background-image for #sidebar */
}

background、およびから： border-right_box-shadow#sidebar

#sidebar {
    width: 250px;
    /* background: #f5f8fa; */
    float: left;
    height: 100%;
    /* border-right: 1px solid #e0eefb;
    box-shadow: inset -5px 0px 4px -2px #e8f1f9; */
    margin-right: 10px;
}

右側の列のコンテンツ全体をdiv(この例では#right) にラップし、次のスタイルを適用します: #right { display: inline-block }

このように、そこに入れるコンテンツの量を気にする必要はありません;)

ライブデモ: http://jsfiddle.net/QXfH3/5/

画像を使用したくない場合、この錯覚を得るには、アルバロからの回答が最善の方法のようです

于 2012-06-20T21:40:27.930 に答える
0

あなたは間違っている：

.clear {clear:both}

高さは親要素から継承されるため、次を追加する必要があります。

body, html {height:100% }
于 2012-06-20T19:14:50.657 に答える