2012-01-15 3 views
0

Я пытаюсь использовать CSS для создания своих страниц. Я хочу, чтобы расти, как это делает контент. Но он, кажется, ограничен размером экрана. Я могу сказать, что этот раздел отличается цветом от родителя. Поэтому в области тела появляется некоторый текст и другой контент.Раздел не динамически растет

scaffold.css.scss

html 
    { 
     width: 100%; 
     min-height: 100%; 
    } 

    body { 
     background-color: #C6C0BA; 
     color: #636363; 
     font-family: verdana, arial, helvetica, sans-serif; 
     font-size: 120%; 
     line-height: 18px; 
     max-width: 1000px; 
     min-height: 100%; 
     margin: 0 auto; 
     } 
    section{ 
     padding: 2%; 
      max-width: 1000px; 
      background-color: #f3f3f3; 
      margin: 0 auto; 


    min-height: 100%; 
} 
..... 

application.html.erb

<!DOCTYPE html> 
<html> 
<head> 
    <title>Alpha</title> 
    <%= stylesheet_link_tag "application" %> 
    <%= javascript_include_tag "application" %> 
    <%= csrf_meta_tags %> 
    <%= stylesheet_link_tag 'screen' %> 
</head> 

<body> 

    <div class='logo'> 
    <img src="assets/SiteHeader.png" class="stretch"> 
    </div> 
    <header> 
    <%= render 'shared/navigation' %> 
    </header> 

<section id='content'> 
    <%= yield %> 
</section> 

</body> 
</html> 

ответ

0

Я никогда не использовал рубин на рельсах, но глядя на ваш CSS, вы, вероятно, не хотят мин -Гайт: 100% в любом теле или #content. Оба должны автоматически масштабироваться, чтобы соответствовать их контенту. Я не тестировал, но если вы хотите минимальную высоту для раздела (#content), вы можете попробовать добавить к нему один или несколько дочерних элементов фиксированной высоты.

например:

<section id="content"> 
<div style="height: 768px;"> 
other stuff here 
</div> 
</section> 
+0

Вы также можете потерять ширину и высоту для HTML {}, как предложение. – stackuser10210

+0

Если я удалю определения HTML {} или body {}, высота будет равна только 30px ниже заголовка. –

+0

html и body всегда будут соответствовать полному размеру окна, если вы не установите размер, насколько я знаю. например body {background-color: blue;} даст полную страницу синего цвета без добавления других элементов. Я ошибаюсь? – stackuser10210

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