2

我有一个包含三个主要 div 的绝对定位布局：标题、左侧选项列和内容列。设计的行为是让标题和左侧选项列始终留在页面上，而内容列能够自由上下滚动（想象左侧的控制面板和顶部的标题栏）。

问题是内容 div 中的窗口大小调整和左右（x 轴）溢出。我想要的行为是最小宽度约为 1000 像素，此时水平滚动条会显示在内容列中并允许用户滚动。这可以防止窗口被调整得太小，以至于我的布局不再像预期的那样。

我曾尝试在现有 CSS 中使用 min-width 指令，但无济于事。min-width 确实实现了我正在寻找的“截止”，但是，没有水平滚动条出现，我无法水平滚动。

有没有办法使用现有的范例来做到这一点，或者样式表是否需要以不同的方式完成？以下是我现有的实现（使用我一直在测试 content_column 的 min-width 属性）：

html {
    overflow: hidden; 
}

body {
    margin: 0px;
    padding: 0px;
    background: #E5E5E5;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    border: 0px none;
}

#header {
    position: absolute;
    margin: 0px;
    top: 0px;
    left: 0px;
    display: block;
    color: #FFFFFF;
    background: #146647;
    font-size: 1.5em;
    padding: 5px;
    width: 100%;
    overflow: hidden;
    z-index: 3;
}

#option_column {
    position: absolute;
    left: 0px;
    top: 40px;
    bottom: 0;
    background: #0F4C35;
    color: #FFFFFF;
    width: 155px;
    padding: 3px;
    z-index: 2;
    overflow: auto;
}

#content_column {
    position: absolute;
    overflow: auto;
    min-width: 1000px;
    z-index: 1;
    top: 40px;
    left: 161px;
    right: 0px;
    bottom: 0px;
    padding: 3px;
    background: #E5E5E5;
    color: #000000;
    font-size: 14px;
}

这是我的 HTML 结构：

<body>
    <div id="header">
        Head
    </div>

    <div id="option_column">
        Option Column
    </div>

    <div id="content_column">
        <div class="header_text">Content Header</div>
        <div id="subheader">
            Content (content_column intended to stop resizing at 1000px)
        </div>
    </div>

</body>
4

2 回答 2

1

在内容部分设置

width:1000px;

overflow-y: auto;

但这样宽度将始终保持在 1000px。换句话说，如下

#content_column {
position: absolute;
width: 1000px;
overflow-y: auto;
overflow-x:scroll; /* override overflow:hidden; applied to body & html */
z-index: 1;
top: 40px;
left: 161px;
right: 0px;
bottom: 0px;
padding: 3px;
background: #E5E5E5;
color: #000000;
font-size: 14px;
}
于 2013-02-24T21:33:52.577 回答
0

做什么

#content_column {overflow-x: scroll}

做？请注意，IE < 9 不会发生特定于轴的溢出，因此您必须使用{overflow: scroll}.

于 2013-02-24T21:27:02.573 回答