我正在尝试创建此页面，但一旦屏幕变小，我就无法向下滚动以查看更多文本。 这是链接 fiddle
<html>
<div class="container_12 container clearfix">
<div class="grid_12 clearfix main_content">
<div class="content">
<div><img src="http://placehold.it/780x150"></div>
<div class="text">
<h1>title</h1>
<p> text<p>
<p> text<p>
<p> text<p>
<p> text<p>
</p>
</div>
</div>
</div>
</div>
</html>
<style>
.content{
width: 780px;
padding: 20px;
position: fixed;
left: 50%;
top: 50%;
color: #000000;
font-family: Lora BoldItalic, Lora;
margin-top: -312px;
margin-left: -390px;
}
.text {
background: gray;
opacity: 0.6;
padding: 20px;
}
</style>
提前致谢!
最佳答案
我从你的 CSS 中删除了一些东西:
position: fixed;
left: 50%;
top: 50%;
margin-top: -312px;
margin-left: -390px;
通常(除非您真的知道自己在做什么)使用边距(尤其是负值)、位置固定、左侧和顶部是一个坏主意，因为您迫使元素保持在固定位置，因此您的页面将无法工作在所有屏幕尺寸。
我在您的代码中看到您正在尝试使用背景(在演示中不可见)尝试将背景添加到 body 而不是 html。我不知道您在尝试什么，但我感觉您希望页面内容在不移动背景的情况下滚动，您需要检查一下 http://jsfiddle.net/gF7Af/31/
我有以下内容:
.myimg{
margin: auto;
}
.content{
margin: auto;
width: 780px;
color: #000000;
font-family: Lora BoldItalic, Lora;
}
关于html - 我的页面不会向下滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20901685/