主な問題は、内側の 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>
私は答えのいずれかを探しています(ブートストラップで高さを%で設定する方法、上記の例を修正する方法)よろしくお願いします。