如何在滚动时保持标题栏不被切断

Question

我只是试图格式化我的标题栏，以便在页面可以从一侧滚动到另一侧时不被切断，如果窗口太小，滚动会在原始页面长度为什么时切断栏：

以下是截至目前的代码：

<div id="head-wrapper">
  <a href=<%=locations_path%>><img src= <%= asset_path('DL_Logo_CMYK.svg') %> id="header-logo" /></a>
  <div id="title">
     <a href=<%=locations_path%>>MapMail</a>
  </div>
  <div id="logged_in_message">
     <% if current_user %>
        <span id="username">Signed in as <strong><%= current_user.name %></strong>.</span>
        <span id="logout"><%= link_to 'Log Out', logout_path, method: :delete %></span>
     <% else %>
       <span id="username">You are not signed in.</span>
     <% end %>
  </div>
</div>

application.css.scss

.....
html {
  height: 100%;
}

body {
  font-family: Lato, sans-serif;
  color: $font-color;
  margin: 0px;
  height: 100%;
}


h1, h2, h3, h4, h5, h6 {
  font-family: GillSansMTBold, "Gill Sans", Calibri, "Trebuchet MS", sans-serif;
  font-weight: bold;
  clear: both;
}

#content {
  margin: 20px;
}

.page-wrapper {
  min-height: 100%;
  margin-bottom: -30px;
}

.page-wrapper:after {
  content: "";
  display: block;
  height: 30px;
}

_header.scss

#head-wrapper {

  overflow: hidden;
  background-color: $base-border-color;
  border-width: 1px;
  border-bottom-style: solid;
  border-color: $medium-gray;
  padding: 5px;

  #title {
    float: left;
    padding: 8px;
  }

  #header-logo {
    height: 30px;
    float: left;
  }

  #logged_in_message {
    padding: 8px;
    float: right;

    #logout {
      padding-left: 10px;
    }

  }

}

我确信这不是很难，但我还没有很多css经验，所以任何帮助都非常感谢！

Answer 1

使用：

html{
overflow:hidden;
}

#headerDiv{

width: 100%;

}

编辑： 向左/向右滚动时使用JQUERY修复标题!!

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 0 //this will be according to the left Attr in css 
    });
});

Answer 2

我无法说这些答案到目前为止对我有所帮助，但我认为我至少得到了在网上搜索一些东西所需要的东西。我没有在标题中添加代码，而是决定添加overflow-x:scroll以向之前的屏幕信息添加滚动条，从而无需滚动整个页面。我可能没有提供足够的关于我的页面的信息供人们建议，所以我可能应该归咎于没有正确的答案，感谢大家的帮助！

Answer 3

欢迎来到令人困惑的CSS定位世界。像量子物理学一样，最好抛弃所有关于事物如何工作的直观想法，并从一个空白的板块开始。这里有一些链接

http://www.w3schools.com/css/css_positioning.asp

http://www.barelyfitz.com/screencast/html-training/css/positioning/

编辑 - 这里是一个jsfiddle https://jsfiddle.net/37okrbzc/

添加了额外的样式，使观众能够看到正在发生的事情。它只是真正重要的position规则。