為什么我的內容沒有選擇就被切斷？

Question

我正在寫一個小型網站來學習HTML和CSS，但我無法使我的內容向任何方向滾動。

當瀏覽器窗口的大小調整到無法容納任何內容的程度時，它不再滾動，而是消失了。 “登錄”按鈕的div應該位於左側950px處。 這意味着如果瀏覽器窗口較小，那么它將允許您滾動瀏覽，對嗎？

“新聞”框將顯示所有寫入的內容，直到到達瀏覽器窗口的底部為止。 然后它將不會滾動或顯示。

有什么建議么？

HTML 在這里，CSS在這里 。

Answer 1

您的CSS具有很多position:fixed屬性。 將對象的position設置為fixed ，即使您正在滾動，它也將保持靜止。 因此，沒有什么可以移動的，因此您無法滾動。 嘗試將CS​​S更改為以下內容：

body {
background-color: #222222;
overflow: auto;
color: #ffffff;
font-family: verdana, sans-serif;
}
a { color: #ffffff; }
a:visited { color: #ffffff; }

#page_header {
margin-top: 55px;
margin-left: 100px;
font-size: 50px;
}

#user_info {
/*right: 50px;*/
left: 950px;
top: 60px;
position:absolute;
}
#user_info a {
padding: 15px;
text-decoration: none;
font-size: 35px;
}
#user_info a:hover {
background-color: #606060;
}

#boxes {
margin-top: 100px;
margin-left: 100px;
}

#left_content_box {
padding: 20px;
background-color: #00cdcd;
width: 600px;
float: left;
}
#left_content_box header {
top: 15px;
left: 50px;
font-size: 25px;
}
#left_content_box section {
padding: 10px;
}
#left_content_box section header {
padding-top: 25px;
position: relative;
font-size: 20px;
left: 0px;
}
#left_content_box section p {
position: relative;
top: 20px;
left: 10px;
font-size: 15px;
overflow: auto;
}

這將使所有內容保持在原來的位置，除了現在可以在將瀏覽器調整為無法顯示其所有內容的位置時滾動頁面。