CSS绝对定位元素溢出

我有一个绝对定位的布局与三个主要的div：标题，左选项列和内容列。设计的行为是让页眉和左选项列始终保持在页面上，而内容列可以自由上下滚动（控制面板左侧图标和顶部标题栏）。CSS绝对定位元素溢出

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

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

有没有办法使用现有的范例来做到这一点，还是样式表需要以不同的方式完成？以下是我现有的实现（与最小宽度属性我一直在测试的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>

来源

2013-02-24 Mike Nielsen

起点小提琴：http://jsfiddle.net/4M43d/ – isherwood 2013-02-24 21:22:02

“我有一个绝对定位的布局（...）确实样式表需要以不同的方式做” 。我很想回答YES。 – FelipeAls 2013-02-24 23:31:38

是的，故意水平滚动是一个不错的主意。这对您的用户来说是一件麻烦事。另外，您的1000像素内容列加上侧边栏意味着大多数访问者将无法看到您的网站的全部宽度。除非你有一些奇怪的要求，否则我会重新考虑这个计划。 – isherwood 2013-02-24 23:50:16

什么

#content_column {overflow-x: scroll}

呢？请注意，IE < 9不会执行轴特定的溢出，因此您必须使用{overflow: scroll}。

来源

2013-02-24 21:27:02 isherwood

“overflow-x：scroll”在div的底部放置了一个禁用的水平滚动条。调整窗口的大小后，我应该能够水平滚动，它保持禁用状态并不起作用。 – 2013-02-24 21:29:07

此外，注意到调整窗口大小也会导致窗口“重叠”滚动条（即，一旦我点击最小宽度，而不是滚动条激活，窗口只是调整它。） – 2013-02-24 21:30:50

在内容部分设置

width:1000px;

overflow-y: auto;

但这样的宽度将永远留在1000像素。换句话说，如下

#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-24 21:33:52

这样做仍然不允许我水平滚动（它只是“切断”）。 – 2013-02-24 21:44:39

试试'width：1000px;溢出-Y：汽车;溢出 - X：滚动;'。另外，请尝试删除正文和html标记中的“overflow：hidden;”并仅将“overflow”属性应用于内容部分。 – 2013-02-24 21:49:13

我更新了上面的代码，以考虑'overflow-x：scroll;'。 – 2013-02-24 22:12:18

CSS绝对定位元素溢出

回答

相关问题