Question

我试图用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>

Answer 1

我从来没有在轨道上使用过ruby，但是看看你的CSS，你可能不希望min-height：100％的身体或#content。两者都应自动缩放以适合其内容。我没有测试过，但是如果你想要一个（#content）的最小高度，你可以尝试添加一个或多个固定高度的子元素。

e.g：

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

部分没有动态增长

1 个答案: