0

主な問題は、内側の div の高さを % で設定できないことです。高さをpxで設定し、内部のdivを%で設定できるラッパーを設定する必要があるスレッドの1つを読みましたが、ブートストラップでは機能しません。

不要な要素でページを過負荷にしたくないので、本文から高さを継承したかった (それが何であれ)。

ブートストラップは何らかの方法で高さを設定し、途中で高さを div の 1 つに継承すると、問題なく受信できますが、内部の div はまだ % 高さを受け入れません。

例:

http://jsfiddle.net/HYtcz/ - CSS (px) without bootstrap, working
http://jsfiddle.net/HYtcz/1/ - CSS (%) without bootstrap, working
http://jsfiddle.net/tH9En/4/ - Adding the bootstrap lib - doesn't work.

コード:

    <html>
<head>
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">    <style>
            .main {
                background: yellow;
                height: inherit;
            }
            .list {
                overflow: scroll;
                background: gray;
                width: 400px;
                height: 20%;
            }
            .list table tr td {
                line-height: 50px;
            }
            </style>
</head>
<body>
                <div class="main">
                    <div class="list">
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                        <p>adfasdf</p>
                    </div>
                </div>
</body>
    </html>

私は答えのいずれかを探しています(ブートストラップで高さを%で設定する方法、上記の例を修正する方法)よろしくお願いします。

4

1 に答える 1

2

これを「ブートストラップライブラリの追加」バージョンに追加するのを忘れました

html, body { height: 1011px; }

デモ

于 2013-07-08T08:48:39.283 に答える