Как запретить отключение полосы заголовка во время прокрутки

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

Я не могу сказать, что любой из этих ответов помог мне до сих пор, но я думаю, что я получил по крайней мере то, что мне нужно, чтобы смотреть некоторые вещи онлайн. Вместо добавления кода в заголовок я решил добавить overflow-x:scroll, чтобы добавить полосу прокрутки к информации, которая была на экране раньше, исключая необходимость прокрутки всей страницы. Я, вероятно, не дал достаточно информации о моей странице, чтобы люди могли предположить, что я, вероятно, виноват в отсутствии правильных ответов, спасибо всем за помощь!

Answer 2

Добро пожаловать в запутанный мир позиционирования CSS. Как и квантовая физика, лучше всего выкинуть все свои интуитивные идеи о том, как все должно работать, и начать с чистого листа. Вот некоторые ссылки

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

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

Edit - вот jsfiddle https://jsfiddle.net/37okrbzc/

Там же дополнительные стили добавлены для того, чтобы зрителю увидеть, что происходит. это действительно действительно правила position.

Answer 3

Использование:

html{ 
overflow:hidden; 
} 

#headerDiv{ 

width: 100%; 

} 

Edit: Использование JQuery, чтобы исправить заголовок при прокрутке влево/вправо !!

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