0

これは非常に単純かもしれませんが、私は HTML/CSS に慣れていないので、理解できません。HTMLは次のとおりです。

<html>
    <body>
        <table>
            <tr>
                <td style="width: 275px;background: gray;overflow: scroll">
                    <div style="height: 1000px;width: 250px; background: green;" />
                </td>
                <td style="width: 620px;background: yellow;">
                    def
                </td>
            </tr>
        </table>
    </body>
</html>

そしてCSS：

html,body,table
{
    height: 100%;
    max-height: 500px;
}

私が望むのは、このテーブルをページ全体の高さまで伸ばすことです。左のセルのコンテンツがページ全体の高さよりも大きい場合は、左のセルに単純なスクロールバーを表示して、ユーザーがスクロールできるようにする必要があります。しかし、代わりに、私のコードではテーブル全体が大きくなり、内側のスクロールバーが機能していないように見えます。

4

1 に答える 1

-2

スタイリングを少し変更します。

<td style="width: 275px;background: gray;overflow: scroll; height: 100%">
   <div style="height: 100%;width: 250px; background: green;float: left" id="test" />
</td>
<td style="width: 620px;background: yellow;">
   def
</td>

max-heightコメントで言及されている@Allan Kimmer Jensenのように削除します

html,body,table
{
    height: 100%;
}

実施例

アップデート

ID を div に追加し、javascript のビットを追加します。

<script type="text/javascript">
        function elementHeight(element) {
            var height = 0;
            var body = window.document.body;
            if (window.innerHeight) {
                height = window.innerHeight;
            } else if (body.parentElement.clientHeight) {
                height = body.parentElement.clientHeight;
            } else if (body && body.clientHeight) {
                height = body.clientHeight;
            }
            document.getElementById(element).style.height = height + "px";
        }
        elementHeight('test');
</script>

更新されたフィドル

于 2013-01-28T09:35:47.103 に答える