如何在调整大小时强制网站的主要部分保持在标题下方

Question

我正在尝试在页面调整大小时将页面的主要内容放在标题下方。当窗口最大化时，一切看起来都很好。将窗口大小调整为较小宽度时，主要内容将被标题隐藏。

我正在使用带有html，css，jQuery和javascript的rails。

这是很多代码。我真的不知道什么是重要的。

该应用程序基于michael hartl的railstutorial。这是bitbucket上源代码的链接。 https://bitbucket.org/railstutorial/sample_app_4th_ed

调整大小在Michael Hartl的轨道教程中也不起作用。

调整窗口大小时，标题会与页面的主要内容重叠。

Answer 1

$(window).resize(function(){ // On resize
    $('#main').css('margin-top', '' + $(".container").height()+'px');
});

问题是我有一个id为“header”且id为“main”的div。那没用。

标题中有一个带有“容器”类的div。 $（“。container”）。height（）工作。

<div id="header">
      <%= render "layouts/header" %>
</div>
<div id="main">main content</div>

在视图中，layout / header是div class =“container”