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絕對定位元素溢出

回答

相關問題