0

当内容太宽时，我无法在我的 div 上获得滚动条。相反，我总是在窗口本身上获得滚动条。我玩过溢出设置，但我无法正确设置。

jsFiddle

HTML

<table class="wrapper" cellSpacing="0" cellPadding="0">
    <tr>
        <td class="header">
            <div>
                <p class="title">HEADER</p>
                <p class="subtitle">subheader</p>
            </div>
        </td>
    </tr>
    <tr>
        <td class="content">
            <div class="clearfix">
                <div class="col4">
                    <div>
                        <label class="fieldname">Field 1</label>
                        <span class="fieldcontrol"><input type="text" id="Text1" /></span>
                    </div>
                    <div>
                        <label class="fieldname">Field 2</label>
                        <span class="fieldcontrol"><input type="text" id="Text2" /></span>
                    </div>
                    <div>
                        <label class="fieldname">Field 3</label>
                        <span class="fieldcontrol"><input type="text" id="Text3" /></span>
                    </div>
                    <div>
                        <label class="fieldname">Field 4</label>
                        <span class="fieldcontrol"><input type="text" id="Text4" /></span>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td class="footer">
            <div class="clearfix">
                <div class="left">
                </div>
                <div class="right">
                    <button type="submit">Ok</button>
                    <button>Cancel</button>
                </div>
            </div>
        </td>
    </tr>
</table>

CSS

.content > div
{
    overflow: auto;
}

它是使用表格的页眉、正文和页脚。在正文中，我想要一个 div 来拉伸表格单元格的整个宽度和高度。当我调整窗口大小时，我希望页眉和页脚保持调整大小，并且当内容位于可见区域之外时，正文显示滚动条。

谢谢！

4

1 回答 1

2

只使用 div 不是更容易吗？ http://jsfiddle.net/tP79v/2/

html

<div class="header">Header</div>
<div class="main">
    <div class="toBig"></div>
</div>
<div class="footer"></div>

css

.body {
    overflow:hidden;
}

.header {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:30px;
    background-color:lightblue;
}

.main {
    position: absolute;
    top:30px;
    bottom: 20px;
    width:100%;
    left: 0;
    background-color:red;
    overflow: auto;
}

.toBig {
    position:relative;
    width: 1000px;
    height: 200px;
    background-color:yellow;
    margin:20px;
}

.footer {
    position: absolute;
    bottom:0;
    left:0;
    height:20px;
    width:100%;
    background-color:green;
}
于 2013-04-23T08:32:04.690 回答