セクションが動的に成長しない

私のページのスタイルを設定するのに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>

出典

2012-01-15 Antarr Byrd

私はRuby on Railsのを使ったことがないが、あなたのCSSを見て、あなたはおそらく分をしたくありません - 身長または体重の100％。両方ともコンテンツに合わせて自動的に拡大縮小する必要があります。私はテストしていませんが、セクション（#content）の最小の高さが必要な場合は、1つ以上の固定高さの子要素を追加することができます。

例えば：

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

出典

2012-01-15 20:21:36 stackuser10210

あなたはまた提案として、HTML {}の幅と高さを失いたくあり。 – stackuser10210

HTML {}またはbody {}の定義を削除した場合、高さはヘッダーの下30pxだけ下がります。 –

htmlとbodyは、私が知る限り、サイズを設定しない限り、ウィンドウのフルサイズと常に一致します。例えばbody {background-color：blue;}は青色のフルページを与え、他の要素は追加しません。私が間違っている？ – stackuser10210

セクションが動的に成長しない

答えて

関連する問題