Моя страница не прокрутится вниз?

Я пытаюсь сделать эту страницу, но как только экран будет меньше, он не заставит меня прокручивать вниз, чтобы увидеть больше моего текста. Вот ссылка 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>

Большое спасибо заранее!

источник

2014-01-03 M Diaz

Пожалуйста включают в себя некоторый код и более подробное объяснение того, что вы пробовали, в вопросе. JSFiddle - отличный способ проверить и продемонстрировать проблемы, но это не должно быть альтернативой хорошему вопросу. – Hecksa

* «Ссылки на jsfiddle.net должны сопровождаться кодом». * Вы видели это сообщение, не так ли? – Pavlo

Жаль об этом, это мой первый раз здесь. Я отредактировал мой вопрос И должен быть правильно добавлен к настоящему времени, надеюсь. –

Я снял несколько вещей из вашего 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; 
}

источник

2014-01-03 10:56:16

Большое вам спасибо за ваш ответ, это было очень полезно !, хотя я также хотел, чтобы ящик был в середине моя страница с текстом на нем, но позиция: фиксированная делает мою страницу не прокруткой вниз, есть ли у вас какие-либо предложения для этого? Спасибо! –

Прошу прощения, если это не то, ed http://jsfiddle.net/gF7Af/31/ –

Спасибо, много! Это действительно очистило мою ошибку, я исправлял основной контейнер, и я не прокручивал его, я очень благодарен за это :-) –

Я не вижу никакого текста. Я не понимаю, почему вы помещаете фиксированную позицию в контент или те отрицательные поля, поэтому я удалил эти нечетные правила и, по крайней мере, теперь вижу текст.

Изменить .content так:

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

источник

2014-01-03 10:52:01 charlie

Поля и положение, скорее всего, будут иметь ориентацию содержимого по горизонтали и по вертикали на экране. – Abrixas2

Это может быть, но есть много лучших способов сосредоточиться на контенте, зачем использовать фиксированное положение, подобное этому. – charlie

Я могу подумайте о двух возможных причинах: 1. Это довольно простой подход и 2. Есть учебники, которые используют этот подход. – Abrixas2

Моя страница не прокрутится вниз?

ответ

Смежные вопросы