CSS樣式不會呈現帶有樣式的離屏元素

我遇到了正常地退出屏幕元素的問題。我相信這個問題與溢出屬性有關。如果我以全屏模式（1080p）瀏覽瀏覽器，但是當我將瀏覽器調整爲較小的分辨率，然後向下滾動時，樣式會消失以顯示不在屏幕上的元素。CSS樣式不會呈現帶有樣式的離屏元素

EDIT [輾轉聯繫到防止將來損壞的鏈接]

/* DEFAULT */ 

* { 
    margin: 0px; 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 12px;  
} 
@font-face { 
    font-family: leela; 
    src: url('leelawad_0.ttf'); 
} 
html, body { 
    height: 100%; 
    background-color: rgb(255,255,255); 
} 
h1 { 
    color: rgb(183,183,183); 
    font-family: leela; 
    font-size: 16px; 
    font-weight: normal; 
    text-transform: uppercase; 
} 
a { 
    color: rgb(102,102,102);  
    text-decoration: none; 
} 

/* ID */ 

#container { 
    height: 100%; 
    overflow-x: hidden; 
    width: 100%; 
} 
#header { 
    border: 1px solid rgb(153,153,153); 
    border-top: 0px; 
    background-color: rgb(255,255,255); 
    padding: 8px; 
    position: fixed; 
    width: 100%; 
    z-index: 3; 
} 
#quickSearch { 
    border: 1px solid rgb(153,153,153); 
    background-color: rgb(250,250,250); 
    height: 30px; 
    margin: 8px 8px 8px 8px; 
} 
    #quickSearch input { 
     background-color: rgb(250,250,250); 
     border: 0px; 
     height: 28px; 
     margin-left: 10px; 
     margin-top: 0px; 
     float: left; 
    } 
#naviContainer { 
    float: left; 
    width: 200px; 
    border-right: 1px solid rgb(153,153,153); 
    background-color: rgb(225,225,225); 
    height: 100%; 
} 
#navigation { 
    background-color: rgb(225,225,225); 
    float: left; 
    width: 200px; 
    margin-top: 31px; 
    position: relative; 
    z-index: 2; 
    height: 100%; 
} 
    #navigation ul { 
     margin: 0px; 
     padding: 0px; 
     width: 200px; 

    } 
    #navigation li { 
     display: block; 
     list-style-type: none; 
     -webkit-transition: all 0.25s ease-in-out; 
     -moz-transition: all 0.25s ease-in-out; 
     -o-transition: all 0.25s ease-in-out; 
     transition: all 0.25s ease-in-out; 
    } 
    #navigation li:hover { 
     background-color: rgb(173,173,173); 
     -webkit-transition: all 0.25s ease-in-out; 
     -moz-transition: all 0.25s ease-in-out; 
     -o-transition: all 0.25s ease-in-out; 
     transition: all 0.25s ease-in-out; 
    } 
    #navigation h1 { 
     border-bottom: 1px dotted rgb(153,153,153); 
     background-color: rgb(127,127,127); 
     padding: 8px; 
    } 
    #navigation h1.fix { 
     border-top: 1px dotted rgb(153,153,153); 
    } 
    #navigation ul li { 
     border-bottom : 1px dotted rgb(153,153,153); 
    } 
    #navigation li a { 
     display: block; 
     padding: 8px; 
    } 
#contentContainer { 
    margin-left: 201px; 
    margin-top: 31px; 
    position: relative; 
} 
#breadcrumbs { 
    background-color: rgb(239,239,239); 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: rgb(153,153,153); 
    padding: 8px; 
    position: inherit; 
} 
    #breadcrumbs ul { 
     display: inline; 
     margin-left: 0px; 
     padding: 0px; 
    } 
    #breadcrumbs li { 
     display: inline; 
    } 
#content { 
    padding: 8px; 
    position: inherit; 
} 
/* CLASSES */ 

.divider { 
    border-left: solid 1px rgb(102,102,102); 
    margin: 0px 7px 0px 5px;; 
}

任何投入將不勝感激！

來源

2013-02-22 Chris Lee Faavesi

嘗試使用位置添加：固定的（我做到了黃色所以它會站出來）：

#navigation { 
    background-color: yellow; 
    border-right: 1px solid #999999; 
    border-top: 0 none; 
    float: left; 
    height: 100%; 
    margin-top: 31px; 
    position: fixed; 
    width: 200px; 
    z-index: 2; 
}

[編輯]第2次嘗試，除去高度。

#navigation { 
    background-color: #E1E1E1; 
    float: left; 
    //height: 100%; 
    margin-top: 31px; 
    position: relative; 
    width: 200px; 
    z-index: 2; 
}

來源

2013-02-22 17:07:26

position：fixed當元素離開可視屏幕時，頁面不會滾動。 – 2013-02-22 17:21:31

看看我原來的帖子，我發佈了一個問題圖片的鏈接。圓圈部分是呈現「屏幕外」的元素。 – 2013-02-22 17:33:24

是的，我看到了，我最初的「答案」是試圖解決這個問題。 – 2013-02-22 17:41:03

，這是沒有什麼更多的則高度：100％的問題

刪除高度：100％從#naviContainer會解決這個問題。

#navigation { 
    background-color: #E1E1E1; 
    float: left; 
    min-height: 100%; 
    margin-top: 31px; 
    position: relative; 
    width: 200px; 
    z-index: 2; 
} 

#naviContainer { 
    background-color: #E1E1E1; 
    border-right: 1px solid #999999; 
    float: left; 
    min-height: 100%; /* the fix */ 
    width: 200px; 
}

來源

2013-02-22 17:42:42

CSS樣式不會呈現帶有樣式的離屏元素

回答

相關問題