html - 为什么我的内容在没有滚动选项的情况下被截断？

Question

我正在编写一个小型网站来学习 HTML 和 CSS，但我无法让我的内容向任何方向滚动。

当浏览器窗口的大小调整到无法容纳任何内容的程度时，它不会滚动，而是消失。登录按钮的 div 应该出现在距左侧 950 像素处。这意味着如果浏览器窗口比那个小，它将允许您滚动，对吗？

新闻框将显示任何写入的内容，直到它到达浏览器窗口的底部。然后它不会滚动或显示。

有什么建议么？

HTML在这里，CSS 在这里。

Answer 1

您的 CSS 中有许多position:fixed属性。当对象的position设置为fixed时，即使您正在滚动，它也会保持静止。因此，没有任何东西可以移动，因此您无法滚动。尝试将您的 CSS 更改为以下内容：

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

这将使所有内容保持在原来的位置，除了当浏览器调整到无法显示其所有内容的程度时页面现在可以滚动。