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

Question

我只是想格式化我的 header 栏，以便在页面可以左右滚动时不被截断，现在，如果 window 太小，滚动会被截断原始页面长度的限制：

这是目前的代码：

<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

欢迎来到令人困惑的 CSS 定位世界。就像量子物理学一样，最好抛弃所有关于事物应该如何运作的直觉想法，从一张白纸开始。这是一些链接

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

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

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

添加了额外的样式以使查看者能够看到正在发生的事情。真正重要的是 position 规则。

Answer 2

使用：

html{
overflow:hidden;
}

#headerDiv{

width: 100%;

}

编辑：使用 JQUERY 修复滚动 left/right 时的 header !!

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

Answer 3

到目前为止，我不能说这些答案中的任何一个对我有所帮助，但我认为我至少已经得到了我需要的东西来在线查找一些东西。我没有向 header 添加代码，而是决定添加 overflow-x:scroll 以向屏幕上显示的信息添加滚动条，从而无需滚动整个页面。我可能没有提供足够的关于我的页面的信息来让人们提出建议，所以我可能要为没有正确的答案负责，不过还是感谢大家的帮助！

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

How to keep header bar from cutting off while scrolling

html

css

jquery

ruby-on-rails

styling