Question

我有一个绝对定位的布局，有三个主要的div：标题，左选项列和内容列。设计的行为是始终在页面上保留标题和左侧选项列，而内容列可以自由地向上和向下滚动（在左侧显示控制面板，在顶部显示标题栏）。

问题是内容div中的窗口大小调整和左右（x轴）溢出。我希望的行为是具有大约1000像素的最小宽度，此时水平滚动条显示在内容列中并允许用户滚动。这可以防止窗口的大小调整到我的布局不再符合预期的程度。

我曾尝试在现有的CSS中使用min-width指令，但无济于事。最小宽度实现＆＃34;截止＆＃34;我正在寻找，但是没有水平滚动条出现，我无法水平滚动。

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

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>

Answer 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;
}

Answer 2

什么是

#content_column {overflow-x: scroll}

做什么？注意IE＆lt; 9不会执行特定于轴的溢出，因此您必须使用{overflow: scroll}。

CSS div溢出了绝对定位的元素

2 个答案: