Html 固定收割台&；滚动时的侧边栏位置_Html_Css_Ruby On Rails_Ruby

Html 固定收割台&；滚动时的侧边栏位置

html css ruby-on-rails ruby

Html 固定收割台&；滚动时的侧边栏位置,html,css,ruby-on-rails,ruby,Html,Css,Ruby On Rails,Ruby,我有一个RubyonRails项目正在进行中。在向下滚动页面时，试图使标题和侧边栏具有固定位置时，我遇到了一些问题。我尝试过这样的姿势：固定；css属性，虽然这在某种程度上起作用，但它会破坏页面其余部分的格式。首先，我将展示我的代码，这样做更有意义。这是一个嵌入式ruby html文件，充当我的web应用程序的店面 application.html.erb 5 %> 计数：用户：用户：该文件有一个用（header class=“main”）包装的标题栏和一个

我有一个RubyonRails项目正在进行中。在向下滚动页面时，试图使标题和侧边栏具有固定位置时，我遇到了一些问题。我尝试过这样的姿势：固定；css属性，虽然这在某种程度上起作用，但它会破坏页面其余部分的格式。首先，我将展示我的代码，这样做更有意义。这是一个嵌入式ruby html文件，充当我的web应用程序的店面

application.html.erb






5 %>
计数：






用户：



用户：

该文件有一个用（header class=“main”）包装的标题栏和一个用（nav class=“side\u nav”）包装的侧栏，然后是erb代码中的实际页面内容（main class=“（%=controller.controller\u name%）），要更好地显示页面的结构，请参阅以下指南

就css文件而言，除了边距、填充和字体样式之外，这里没有太多内容，它相当大，所以我不会在这里包括它。我不认为有任何东西会阻碍这个问题的解决

我的目标是在用户滚动页面内容时，使顶部和侧栏保持固定。当我尝试使用position:fixed时，问题是内容会放在边栏后面。我可以通过在内容中添加填充来解决这个问题，但另一个问题出现了，因为侧栏的大小并不总是固定的，当用户单击某些按钮时，侧栏可能会扩大或缩小，因此添加固定填充不是一个好的解决方案。我有没有办法做到这一点，也许是通过JS？这里有点不知所措，感谢您的帮助：）

最简单的方法可能是使用flexbox

我在这里给大家举了个例子：

<!DOCTYPE html>
    <html>
      <head>
      </head>
    <body style="margin: 0">
      <div style="height: 100vh; display: flex; flex-direction: column; overflow: hidden">
        <!--top bar-->
        <header class="main" style="background-color: #aaa; padding: 5px;">
          <button onclick="document.getElementById('sideBar').innerHTML = 'Bigger text that grows'">Change side bar text</button>
        </header>

        <section class="content" style="display: flex;">

          <!--side bar-->
          <nav class="side_nav" style="padding: 5px;">
            <p style="background-color: #ccc; height: 300px;" id="sideBar">Side bar</p>
          </nav>

          <!--actual content-->
          <main class=' <%= controller.controller_name %> ' style="flex: 1; height: 100%; overflow: auto; padding: 5px;">
            <p style="background-color: #eee; height: 300px;">Main content</p>
            <p style="background-color: #eee; height: 300px;">Main content</p>
            <p style="background-color: #eee; height: 300px;">Main content</p>
            <p style="background-color: #eee; height: 300px;">Main content</p>
            <p style="background-color: #eee; height: 300px;">Main content</p>

          </main>

        </section>
      </div>
    </body>
  </html>


更改侧栏文本
侧栏
主要内容
主要内容
主要内容
主要内容
主要内容

请注意，您需要重置

的

边距，最简单的方法可能是使用flexbox
我在这里给大家举了个例子：
<!DOCTYPE html>
    <html>
      <head>
      </head>
    <body style="margin: 0">
      <div style="height: 100vh; display: flex; flex-direction: column; overflow: hidden">
        <!--top bar-->
        <header class="main" style="background-color: #aaa; padding: 5px;">
          <button onclick="document.getElementById('sideBar').innerHTML = 'Bigger text that grows'">Change side bar text</button>
        </header>

        <section class="content" style="display: flex;">

          <!--side bar-->
          <nav class="side_nav" style="padding: 5px;">
            <p style="background-color: #ccc; height: 300px;" id="sideBar">Side bar</p>
          </nav>

          <!--actual content-->
          <main class=' <%= controller.controller_name %> ' style="flex: 1; height: 100%; overflow: auto; padding: 5px;">
            <p style="background-color: #eee; height: 300px;">Main content</p>
            <p style="background-color: #eee; height: 300px;">Main content</p>
            <p style="background-color: #eee; height: 300px;">Main content</p>
            <p style="background-color: #eee; height: 300px;">Main content</p>
            <p style="background-color: #eee; height: 300px;">Main content</p>

          </main>

        </section>
      </div>
    </body>
  </html>


更改侧栏文本
侧栏
主要内容
主要内容
主要内容
主要内容
主要内容

请注意，您需要重置
的边距，嘿，谢谢您的回复！这是完美的。我将阅读flexbox，因为我以前从未使用过它，但非常感谢您的回答和有用的示例！嘿，谢谢你的回复！这是完美的。我将阅读flexbox，因为我以前从未使用过它，但非常感谢您的回答和有用的示例！