Question

我正在尝试制作此页面但是一旦屏幕变小，它就不会让我向下滚动以查看更多我的文字。这是链接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>

提前非常感谢你！

Answer 1

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

Answer 2

我没看到你的任何文字..我不明白为什么你把固定位置放在内容上也没有那些负边距，所以我删除了那些奇怪的规则，至少我现在可以看到文字了。

像这样修改 .content ：

.content{
    width: 780px;
    padding: 20px;
    /*margin: auto;*/
    color: #000;
    font-family: Lora BoldItalic, Lora;
}

我的页面不会向下滚动？

2 个答案: